How to pass data from a page to another page using react router

by

Option 1: Pass Route State

Send the state in the route transition.

  • Using react-router-dom v5

You can pass some state unique to the mapped entry, like info.id along with the route push that happens when the link is clicked. This obfuscates the data from the user as you aren’t leaking information out to the ui (i.e. the browser).

<Link
  to={{
    pathname: '/home/userDetails',
    state: {
      infoId: info.id,
    },
  }}
>
  • Using react-router-dom v6

The link API changed a bit in v6, the state is now a prop.

<Link
  to='/home/userDetails'
  state={
    infoId: info.id,
  }
>

You can then unpack the state from the location prop/object on the component being returned by that route. Use guards in case a user has navigated to '/home/userDetails' from elsewhere, as state may be undefined.

If passed route props:

props.location && props.location.state && props.location.state.infoId

or

props.location?.state?.infoId

if using function components then you can also use the useLocation React hook:

const { state: { infoId } = {} } = useLocation();

Edit lucid-kowalevski-uxgs4

Option 2: Pass Something in the URL

<Link to={`/home/userDetails/${info.id}`>

And retrieve the param from the match prop in the returned route component. For example if the route looks like this:

<Route path="/home/userDetails/:infoId" component={... } />

Then in the component get id:

props.match.params.infoId

And in the case of function components, the useParams React hook:

const { infoId } = useParams();

The user can see this, but you don’t have to use the guard pattern to access since by definitions it’ll be defined by the route (though infoID can still be defined if the user types in an invalid id).

More Related Contents:

  1. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  2. How do I render components with different layouts/elements using react-router-dom v6
  3. react router v6 navigate outside of components
  4. Problem in redirecting programmatically to a route in react router v6
  5. Error: [PrivateRoute] is not a component. All component children of must be a or
  6. React doesn’t reload component data on route param change or query change
  7. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  8. ReactJS – Pass props with Redirect component
  9. Multiple Nested Routes in react-router-dom v4
  10. How do you pass data when using the navigate function in react router v6
  11. how to listen for route change in react-router-dom v6
  12. ReactJS: [Home] is not a component. All component children of must be a or
  13. Error “Error: A is only ever to be used as the child of element”
  14. How to create a protected route with react-router-dom?
  15. react-router-dom v6 Routes showing blank page
  16. using history with react-router-dom v6
  17. React Router Dom routes are returning blank pages
  18. React router dom: Route and Router not working at all
  19. React: ‘Redirect’ is not exported from ‘react-router-dom’
  20. How to properly use useHistory () from react-router-dom?
  21. How can I redirect in React Router v6?
  22. “SyntaxError: Unexpected token < in JSON at position 0"
  23. ReactJS – Does render get called any time “setState” is called?
  24. How to pass in a react component into another react component to transclude the first component’s content?
  25. Github – unexpected disconnect while reading sideband packet
  26. How to pass state back to parent in React?
  27. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  28. ReactJS – Get Height of an element
  29. Disable chrome react DevTools for production
  30. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”

Leave a Comment