Better documentation for Navigate component and useNavigate hook

[emanuelescarabattoli]

What is the new or updated feature that you are suggesting?

In the documentation about Navigate component (https://reactrouter.com/docs/en/v6/api#navigate) and useNavigate (https://reactrouter.com/docs/en/v6/api#usenavigate) hook, a exhaustive explanation about the state option is missing. It is also hard to find documentation about this option in the whole documentation.

Why should this feature be included?

To better help user understand what is the option for and, eventually, use it in the best way.

[cryptoquick]

For those trying to figure out how to access location state supplied to the navigate function, apparently we're supposed to use something called "useLocation":

https://stackoverflow.com/a/64566486

Would be nice if the connection between the two was documented.

[github-actions[bot]]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[bsides]

I have more to add. If you want to pass along a state and search to the useNavigate hook, you'll need to form an object like this:

let navigate = useNavigate()

navigate({
  pathname: '/the_route_here',
  state: { some: 'object' },
  search: { param: 'value' }
})

which isn't written anywhere in the docs. If you try to do something like the example below it won't work.

let navigate = useNavigate()

navigate('/the_route_here', { 
  state: { some: 'object' },
  search: { param: 'value' }
}

EDIT: I can post a reproduction after work. Let me know if it's needed though.