How to pass props to routes using redirect

Question

I am working on a reactjs project where i have to pass props form component A to Component B now , Component A has the following code inside render function:

{this.state.showComponentedit ?
<div>
<Redirect to={'/editB'} editdata={this.state.feedData} />: null
</div>
}

I am getting the current data passed by B in A component using following code:

// inside a random function which will be invoked on button press
console.log("Props from B", this.props.edidata);

The edidata is null in Component A. how can i get the value when i am invoking the rooute "editB" and use that value in component B. Thank you

Possible Duplicate of [How to pass params with history.push in react-router v4?](https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4/45263164#45263164) — Shubham Khatri, Jan 07 '19 at 08:01

score 1 · Answer 1 · answered Jan 07 '19 at 08:05

1

You can also pass an object to 'to' prop of Redirect like this:

<Redirect to={{
  pathname='/editB'
  state={
    editdata: this.state.feedData
  }
}}/>

After that in editB component you can get the data from:

this.props.location.state

I hope this approach will solve your problem.

answered Jan 07 '19 at 08:05

Muhammad Bilal

341
3
8

may i know more about location because i am finding an error when i try to access using this.props.location.state.editdata . my js script is saying location is undefined. – Divakar R Jan 08 '19 at 04:43

score 1 · Answer 2 · edited Jan 08 '19 at 07:53

1

Maybe you can do this:

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

The state object can be accessed via this.props.location.state in the B component.

More details: https://reacttraining.com/react-router/web/api/Redirect/to-object

edited Jan 08 '19 at 07:53

Icepickle

12,689
3
34
48

answered Jan 07 '19 at 08:09

Yan Huang

41
2

score 0 · Answer 3 · answered Jan 07 '19 at 08:02

First you have to make the data from B accessible to A

You can do that by lifting the data to the parent component and then passing that data to A using Route

 <Route
   exact={true}
   path="/mycomponent"
   render={props => <EditComponent editData={this.state.feedData} />}
 />

How to pass props to routes using redirect

3 Answers3