Menu
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.
344
To pass props to the Redirect component with React Router, we put it in the object we set as the value of the to prop. <Redirect to={{ pathname: "/order", state: { id: "123" }, }} />; to set the to prop to an object with the state property set to an object with the props.
Using Link So when we click on the Register link, it will redirect to the /register route. But Link also allows us to pass additional data while redirecting. Here, at the place of data_you_need_to_pass , we can pass a string or object , array and so on and in the /register route we will get that data in props.
The Redirect component was usually used in previous versions of the react-router-dom package to quickly do redirects by simply importing the component from react-router-dom and then making use of the component by providing the to prop, passing the page you desire to redirect to.
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.
Source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object
90
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);} If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
