CODEWITHSUNDEEP
javascriptreactjs
Thian Kian Phin
Thian Kian Phin

Reputation: 931

Pass object into react component using react router

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?

Upvotes: 2

Views: 374

Answers (2)

Tharaka Wijebandara
Tharaka Wijebandara

Reputation: 8065

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.

Upvotes: 0

Joe Lloyd
Joe Lloyd

Reputation: 22323

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.

Upvotes: 1

Related Questions