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

Solution 1:

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();

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

• Link to
• location
• match
• useLocation
• useParams