Everywhere I read online, for eg here. However, for me the state is not maintained when I refresh the page.

Here is how I’m using navigation:

const navigate = useNavigation();
...
navigate(`/instruction/${i.id}`, {
  state: {
    sId: s.id,
    sName: s.name
  }
});

And in my second component, I’m using useLocation like this:

const location = useLocation();
console.log(location.state)

When I navigate from component A to B, I see the location state logged correctly. However, when I hard refresh (with the reload button at the top) on component B, the state goes away (console.log prints null).

This is contrary to everything I’ve read online about this topic. For everyone else, it seems like the state is maintained on refresh, but not for me.

Extra info: I’m using react-router-dom v6.0.2 and react v18.2.0

I’ve tried a lot of googling but can’t find any answers.