How to use dynamic routing in React?

Question

I am developing a dashboard application using React. I am having some issues understanding react-router. How can we use the dynamic route and render a component?

My app has a few static routes like /user, /profile and /dashboard. I am rendering User, Profile and Dashboard components for the routes. When the user logs in, the server will send JSON response which contains, user id, type, and other fields. I want to change the routing path to /dashboard/45 (45 is userId) for this user after a successful login. In the end, the Dashboard component will render different elements based on userId and userType.

<Route 
path='/dashboard'
exact={true}
render={(props) => <Dashboard {...props} user={user} handleChildFunc= 
{this.handleChildFunc}/>}/>

What is missing in this code? I am not sure what to google or which tutorial to follow. Thanks in advance.

Paddy · Accepted Answer · 2019-08-23 16:14:22Z

3

This is what I use:

<Route exact path='/feed/:id' component={
  (props) =>
    <Feed
       postId={props.match.params.id}
    />
}/>

Then the id can be accessed inside Feed using props.postId e.g.

constructor(props) {
  super(props);

  if (props.postId) { 
    // do something
  }
}

answered Aug 23, 2019 at 16:14

Paddy

6251 gold badge6 silver badges14 bronze badges

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

1 Comment

dhavalnc1 Over a year ago

Thanks. It works. Now I will try to make nested routes like /dashboard/45/units/devices etc.

Collectives™ on Stack Overflow

How to use dynamic routing in React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related