ReactJS - Pass props with Redirect component
JavascriptReactjsReact Router-DomJavascript Problem Overview
How should you pass props with the Redirect
component without having them exposed in the url?
Like this <Redirect to="/order?id=123 />"
? I'm using react-router-dom
.
Javascript Solutions
Solution 1 - Javascript
You can pass data with Redirect
like this:
<Redirect to={{
pathname: '/order',
state: { id: '123' }
}}
/>
and this is how you can access it:
this.props.location.state.id
The API docs explain how to pass state and other variables in Redirect / History prop.
Solution 2 - Javascript
You should first pass the props in Route where you have define in your App.js
<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>
then in your first Component
<Redirect
to={{
pathname: "/test/new",
state: { property_id: property_id }
}}
/>
and then in your Redirected NewTestComp you can use it where ever you want like this
componentDidMount(props){
console.log("property_id",this.props.location.state.property_id);}
Solution 3 - Javascript
You can use browser history state like this:
<Redirect to={{
pathname: '/order',
state: { id: '123' }
}} />
Then you can access it via this.props.location.state.id
Solution 4 - Javascript
With Functional Components/Hooks, react-router-dom version 5.2.0 and passing down both Function and regular props:
Using @Barat Kumar answer, here you can also see how to pass and access functions as props with Redirect. Note that there is also a difference in how you access the property_id prop.
The Route is the same:
<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>
The Redirect:
<Redirect
to={{
pathname: "/test/new",
testFunc: testFunc,
state: { property_id: property_id }
}}
/>
Accessing both props inside NewTestComp:
useEffect(() => {
console.log(props.history.location.testFunc);
console.log(props.history.location.state.property_id);
}, []);
Note that "state" came from the use in Class Components. Here you can use any name you want and also pass regular props just like we did the function. So, departing a bit more from @Barat Kumar accepted answer, you can:
<Redirect
to={{
pathname: "/test/new",
testFunc: testFunc,
propetries: { property_id: property_id1, property_id2: property_id2},
another_prop: "another_prop"
}}
/>
And access those like so:
console.log(props.history.location.testFunc);
console.log(props.history.location.propetries.property_id1);
console.log(props.history.location.propetries.property_id2);
console.log(props.history.location.another_prop);
Solution 5 - Javascript
- You can come with your own hook for the same purpose :
import { createBrowserHistory } from "history";
const withRefresh = createBrowserHistory({ forceRefresh: true });
const ROOT_PATH = process.env.PUBLIC_URL || "/myapp";
const useRedirectToLocation = (params="1") => {
if(params){
withRefresh.push({
pathname: `${ROOT_PATH}/create`,
state: { id: `${params}` }
});
}
}
export default useRedirectToLocation;
- and use it like :
import useRedirectToLocation from './useRedirectToLocation
const handleOnClick = params => useRedirectToAccounting(params)
const RedirectorComponent = () => <a onClick={handleOnClick}>{"Label"}</a>
** this can be further refactored based on requirement.
Solution 6 - Javascript
<Redirect to={{
pathname: '/path',
state: { id: '123' }
}} />
Then you can access it via this.props.location.state.id
in the desired component