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?
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.
-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