CODEWITHSUNDEEP
reactjsreact-routerfrontendreact-router-v4
Alexander Lott
Alexander Lott

Reputation: 11

React Router: How to render different Components with different parameters

Is it possible to have routes with different parameters and render different components based on the parameters?

For an example can I do:

<Route path="/SamePath/:param1" component={Component1} />
<Route path="/SamePath/:param2" component={Component2} />

Upvotes: 1

Views: 2178

Answers (3)

Simon Dell
Simon Dell

Reputation: 638

In my project, I created a dictionary mapping possible values of the parameter to the desired component, and created <Route>s based on this dictionary.

<Switch>{
    [{
        ['param1']: Component1,
        ['param2']: Component2,
    }].forEach((component, param) =>
        <Route
            component={component}
            exact
            path={`/path/with/${param}`}
        />
    )
}</Switch>

This will produces individual <Route>s for each path variation you wish to match. It will render different components for each route and, to me, seems in keeping with React-Router v4's dynamic routing ethos.

I encountered a problem: I couldn't access the value of the param via the match property passed to the rendered child. The Route matches against a specific path string (e.g. '/path/with/paramValue1) and not against a route descriptor with a parameter (e.g. '/path/with/:param'). This means thematch.params` dictionary passed to the child will not contain any keys or values. If you don't need the params in your child, this method will work fine. I wanted to inspect the param in the child so I had to look for a different method.

Upvotes: 0

Steve Holgado
Steve Holgado

Reputation: 12071

If you are trying to have a the same route structure but render different components based on the value of the param, then you could try using render to decide which component to render based on the value of the param:

<Route path="/SamePath/:param1" render={ (props) => {

  if (props.match.params.param1 == 'something') {
    return <Component1 { ...props } />
  } else {
    return <Component2 { ...props } />
  }

} />

Upvotes: 2

Cristopher E.
Cristopher E.

Reputation: 34

If it is for lets say only two routes that will differ instead of using the capturing : just type in the name Eg.( samePath/organges samePath/apples) of the route if thats not the case and you want to capture a variarty range of to render differnt components you could use the regex routes feature of react router 4.. but that is much more complicated

Upvotes: 0

Related Questions