Pass object into react component using react router

Question

This is my routes.js, I have a problem passing data which has been received in userProfiles, to userProfileDetail of that user. I don't want to do another API call in userProfileDetail, because there is already a call in userProfiles

const routes = {
  component: Base,
  childRoutes: [
    {
      path: '/profiles',
      getComponent: (location, callback) => {
        callback(null, userProfiles);
      }
    },

    {
      path: '/profile/:profile_id',
      getComponent: (location, callback) => {
        callback(null, userProfileDetail);
      }
    }
  ]
};

How I navigate is just via a

<Link to={/profile/${user._id}} /> in userProfiles, but how to pass from userProfiles to userProfileDetail?

Joe Lloyd · Accepted Answer · 2017-04-22 14:05:29Z

1

You must make another call

What if a person refreshes the page on userProfileDetail? how will the get any data at all? You cannot make assumptions about what data the user already has. you must make sure that any page can be built by itself.

Use state management

A great way to share data across your app is to implement a state management system like redux that way you can call any data you have from any component in your app making passing data like this redundant.

answered Apr 22, 2017 at 14:05

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tharaka Wijebandara · Accepted Answer · 2017-04-22 14:23:23Z

0

You can use state of react-router.

Set an object to to prop in your Link like this.

<Link to={{
  pathname: `/profile/${user._id}`,
  state: { userProfiles: userProfiles }
}}/>

and now you can access this state from location.

location.state.userProfiles

Also, note that state won't have any value if user navigate the page by directly typing URL in the browser or reload the page. So the ideal solution is call API and load these data agian using the user._id if state has no value.

edited Apr 22, 2017 at 14:23

answered Apr 22, 2017 at 14:13

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

Collectives™ on Stack Overflow

Pass object into react component using react router

2 Answers 2

You must make another call

Use state management

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You must make another call

Use state management

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related