React router, pass data when navigating programmatically?

Question

We could navigate to different path using

this.props.router.push('/some/path')

Is there a way to send params (object) along when navigating?

There are other options I can think of, but wonder if passing object is possible at all?

• I could embed id of the object and refetch the object from server from the new page.

• Or I could store the object in global storage like redux store. (This object needs to be removed from the store soon. So I'm thinking it might not be good to put it there in the first place)

Answer 1

The current answers are outdated.

React Router 6:

Use the useNavigate hook:

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

Then, you can access the state data in '/other-page' via the useLocation hook:

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

React Router 4 or 5:

Call history.push, and pass an object as the 2nd param to pass state:

props.history.push('/other-page', { id: 7, color: 'green' }))

Then, you can access the state data in '/other-page' via:

props.location.state

Answer 2

React Router uses location objects. One of the properties of a location object is state.

this.props.router.push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

On the page that is navigated to, the current location will be injected into the component whose route matched, so you can access the state using this.props.location.state.

One thing to keep in mind is that there will be no state if a user navigates directly to the page, so you will still need some mechanism to load the data when it does not exist.

Answer 3

Best way to pass data to the target Component, just copy paste the code and see the magic, I also explained it in depth.

---

Remember: in react-router-dom v6 you can use hooks instead.

version 5.X

Let's suppose we have two Components first and second. The first has the link which will target the second component.

The first Component where the link is, by clicking the link you will go to the target path as in my case it is:"/details".

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

export default function firstComponent() {
return(
<>
    <Link to={{
      pathname: '/details',
      state: {id: 1, name: 'sabaoon', shirt: 'green'}
    }} >Learn More</Link>
</>
)
}

---

Now in the second Component you can access the passed object as:

import React from 'react'


export default class Detials extends React.Component{

    constructor(props){
        super(props);
        this.state={
            value:this.props.location.state,
        }

    }


alertMessage(){
       console.log(this.props.location.state.id);
    }

render(){
return (

    <>
     {/* the below is the id we are accessing */}

      hay! I am detail no {this.props.location.state.id} and my name is 
      {this.props.location.state.name}

      <br/>
      <br/>

 {/* press me to see the log in your browser console */}
<button onClick={()=>{this.alertMessage()}}>click me to see log</button>

    </>

    )
}

}

note:In version 6 of react-router-dom the above method won't work on class components though you can use functional components of react by using useLocation hook and then you can draw the state object through that location in another component.

---

version 6

How to achieve the same using hooks v6 of react-router-dom

Let's suppose we have two functional components, first component A, second component B. The component A wants to share data to component B.

usage of hooks: (useLocation,useNavigate)

import {Link, useNavigate} from 'react-router-dom';

function ComponentA(props) {

  const navigate = useNavigate();

  const toComponentB=()=>{
navigate('/componentB',{state:{id:1,name:'sabaoon'}});
  }

  return (
   <>
<div> <a onClick={()=>{toComponentB()}}>Component B<a/></div>
</>
  );


}


export default ComponentA;

---

Now we will get the data in Component B.

import {useLocation} from 'react-router-dom';

 function ComponentB() {

    const location = useLocation();
   
        return (

            <>
               
<div>{location.state.name}</div>

            </>
        )
    }

export default ComponentB;

Answer 4

For functional component and react-router-dom:^5.2.0 let's take a very simple example to make the concept precise

import { useHistory } from "react-router-dom";

  function Sender(){ 
  
  const history = useHistory();

  const goToReceiver = () => {
    history.push("/receiver", { name:'Mr',age:23 });
  }

  return <button onClick={goToReceiver}>Go To Receiver</button>
  }

Now lets see how tha data came to receiver route

  import { useLocation } from "react-router-dom";

  function Receiver(){ 
  
  const location = useLocation();

    return <div>
             <p>{location.state.name}</p>
             <p>{location.state.age}</p>
           </div>
  }

Answer 5

Their are use cases for sharing data using react-router dom use react-router-dom useNavigate(); than =>

const navigate = useNavigate();
navigate('/toPath', {state: customData})

in other component lets say you want to fetch that data use another hook that is useLocation()

const location = useLocation()
location.state // data will be shared by navigate

Answer 6

You could make a use of useHistory hook of react-router-dom.

Below code is for you to pass your data to the stated route which is "/dashboard".

let history = useHistory();

history.push({
            pathname: '/dashboard',
            state:{
                tags: 'your-value' 
            }
    });

and from the "/dashboard " you can use the useHistory() to receive the above data.

Below code is for you to receive your data.

const Dashboard =()=>{

 let {location} = useHistory();

 return (<>{location.state.tags}</>)
}

Answer 7

Passing query parameters when programatically navigation in react router

History objects may be used programmatically change the current location using both history.push and history.replace.

    history.push('/home?the=query', { some: 'state' })

If we pass the history object down into a component as props. Then we can navigate programatically using the react router methods available on the history object.

Now lets assume you are passing down the history object as a prop called 'router'. So it would be referenced inside a component with class based syntax like:

this.props.router

When using push or replace you can either specify both the URL path and state as separate arguments or include everything in a single location-like object as the first argument.

this.props.router.push('/some/path?the=query')

Or you can use a single location-like object to specify both the URL and state. This is equivalent to the example above.

this.props.router.push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

Note - Of course make sure that the this.props.router is actually the history object from the react-router api.

Answer 8

I was not able to get this working with react-router v4+. But the following does work:

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.push('/takeTest', {
  subjectsList: this.props.subjectsList.filter(f => f.isChecked === true)
})

Answer 9

For sending:

navigate("/success", {
          state: {
            stripeData: res.data,
            products: cart,
          },
        });

For Receiving:

import { useLocation } from "react-router-dom";
  const location = useLocation();
  const data = location.state.stripeData;
  const cart = location.state.products;

Answer 10

if you want to send it in query string

this.props.router.push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})