ReactJS - Pass props with Redirect component

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

Source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md#to-object


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


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);

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);}