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

Question

Please I need help on react-router-dom, I am new to the library and can seem to find any solution since. I am getting three results from an api call, in which I map over the data to render it on UI, now what I need now is that if I click on a row on one of this list, I want it to take me to a screen showing the details of only that single thing I clicked on.

import React, { Component } from "react";

export default class User extends Component {
  state = { userDetails: "" };

  componentDidMount() {
    axios.get(`https://urlforapi.com`)
    .then(({ data }) => {
      this.setState({
        userDetails: data
      });
    });
  }

  render() {
    const { userDetails } = this.state;
    return (
      <div>
        {userDetails
          ? userDetails.map(info => {
              return (
                <Link to="/home/userDetails">
                  <div key={info.id}>
                    <p>{info.name}</p>
                  </div>
                  <div>
                    <p>{info.age}</p>
                  </div>
                  <div>
                    <p>{info.description}</p>
                  </div>
                </Link>
              );
            })
          : null}
      </div>
    );
  }
}

Answer 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

Answer 2

You can use path params option of react-router-dom .

Example

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Topic from '../topic'

export default function App() {
  return (
    <Router>
      <div>
        <Route path="/topic/:name" component={Topic} />
      </div>
    </Router>
  );
}

Pass the params:

import React, { Component } from "react";
import { Link } from 'react-router-dom'

export default class Topics extends Component {
  render() {
    return <Link to="/topic/someTopicName">Some Topic</Link>;
  }
}

Access router params in the component

import React from 'react'

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}

Answer 3

This is how you can pass data to navigated component

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

And access like this in navigated component

if it's class based component.

this.props.location.state

if it's functional component

props.location.state

Answer 4

If your using function component in your react application. You can follow below steps

Main page:

<Link
  to={{
    pathname: '/your/path',
    state: { 
       data: "your data"
    },
  }}
>

In your child page or page you wanted to route:

use useLocation (version 5.+) hook

const emp = useLocation()

console.log(emp)

Output

{ 
   state: { 
       data: "your data" 
   } 
}