React router, pass data when navigating programmatically?
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)
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.
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
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>
}
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}</>)
}