React-router - how to handle route refresh?-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

-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