ReactJS navigating to using router?

Question

How can I pass the information displayed by that particular <div/> so that I can display that particular information in the route that I navigated to as well?

Thank you and will accept/upvote the answer

Do any of these methods work for you: http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component — Jayce444, Oct 30 '16 at 08:26
Have a look at Thomas E's and ColCh's answers in that thread and if you could use those methods for passing the props on — Jayce444, Oct 30 '16 at 09:14

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

I am not entirely sure I understand your exact problem, but I assume you just want to pass params to the route you navigate to using <Link>

Take a look at this: https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

In the documentation, about to prop it says:

A location descriptor. Usually this is a string or an object [...]

If it's an object it can have four keys:

pathname: A string representing the path to link to.

query: An object of key:value pairs to be stringified. [...]

And the example of this:

<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
  Hello
</Link>

So your case might look like:

render() {
  var profile = this.props.profile;
  var query = {
    firstName: profile.firstName,
    lastName: profile.lastName
  };

  return (
    <Link to={{ pathname: '/details', query: query }}>
      <div>
        <div>
          {profile.firstName}
        </div>
        <div>
          {profile.lastName}
        </div>
      </div>
    </Link>
  )
}

Your details page should then be able to access the params from: this.props.routeParams object which will have your query params that you passed in

I gave it an attempt as exactly but with `query: profile`, but I only see `__proto__: Object` for both `routeParams` and `params`. Am I missing something? — Jo Ko, Oct 31 '16 at 02:54
I have not tested this code I wrote, I will do that if I don't forget tonight. :) Try searching in `this.props.location.query`, I have mistaken query with route params. — Vincas Stonys, Oct 31 '16 at 12:25
If you want to access data from route params instead of query params, you must define your route like this: `` And use link like this: `` Then it should be available on: `this.props.routeParams` Again, haven't tested, but if it works, I'll modify my original answer — Vincas Stonys, Oct 31 '16 at 12:27

score 0 · Answer 2 · answered Oct 30 '16 at 13:09

Maybe you can try something like this :

Your router :

<Router history={hashHistory}>
  <Route component={Root} path='/'>
    <IndexRoute component={Profile}/>
    <Route component={Details} path='details/:id'/>
  </Route>
</Router>

Then you can create your link like

<Link to="details/profile">Profile</Link>

And then inside details you can check for passed id with

this.props.params.id

and then depending on that id you can show your data.

ReactJS navigating to using router?

2 Answers2