React-router - how to handle route refresh?

Question

Let's say I am using react-router, with two routes /page1, /page2 I am currently on Page1.jsx, and I want to move to Page2.jsx, passing some state.

On Page1.jsx I can use :

<Redirect
  to={{
    pathname: '/page2',
    state: { prop1:val1, prop2:val2 } 
  }}
/>

On Page2.jsx, I can retrieve the state with:

props.location.state

While on /page2, if the user decides to hit the Browser refresh, then /page2 is NOT loaded as a result of a react-router Redirect; so the state will be null/undefined.

What's the standard or best-practice way to handle such a scenario (of the user hitting Browser refresh), such that the state passed from /page1 is still retained?

score 0 · Accepted Answer · answered Jul 01 '22 at 15:55

As you've discovered, the route state can be very transient and basically only exists for the duration of the route transition and reception by the target routed component. You'll want to save the passed state to local state in the receiving component, and then persist it to longer-term storage so it can be retreived after a page reload. LocalStorage is often used for this.

Here's an example:

const { state } = props.location; // access passed route state
// or
const { state } = useLocation();  // access passed route state

const [localState, setLocalState] = useState(
  JSON.parse(localStorage.getItem("localState")) // saved value | null
);

useEffect(() => {
  setLocalState(state); // cache route state locally
}, [state]);

useEffect(() => {
  localStorage.setItem( // persist to localStorage
    "localState",
    JSON.stringify(localState)
  );
}, [localState]);

How you choose/decide to invalidate your cache (i.e. clear the localStorage) is up to you and your specific needs.

score 0 · Answer 2 · answered Jul 01 '22 at 16:05

0

-Redirect not a good solution in your case , redirect will not change the route in your navigator , so i suggest you to use Link instead .

Example :

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

And you could use some help from this question : React-Router - Link vs Redirect vs History

and to read the router documentation : https://v5.reactrouter.com/web/api/Link

answered Jul 01 '22 at 16:05

amine beji

3
3

You are suggesting a Link; but I have a Button .. it needs to "do stuff" in an Event Handler before Redirecting; By using a LINK I can no longer "Do Stuff". So don't you think you should not suggest Link blindly as a replacement ? – joedotnot Jul 01 '22 at 19:32
you can use navigator , it could be a function you can call it in the button , there is a documentation it could help you , https://reactrouter.com/docs/en/v6/hooks/use-navigate – amine beji Jul 01 '22 at 20:22
Thanks, but navigator is for v6, I am using v5. I will investigate navigator once I move to v6 – joedotnot Jul 02 '22 at 06:01

React-router - how to handle route refresh?

2 Answers2