CODEWITHSUNDEEP
reactjsreact-router
Meir
Meir

Reputation: 594

default react route conflicts with route with params

my app.js code

<Switch>
          <Route exact path='/' component={HomePage} />
          <Route exact path='/about' component={About} />
          <Route exact path='/careers' component={Careers} />
          <Route
            exact
            path='/solutions/standard'
            render={() => <Solutions solution='Standard' />}
          />
          <Route
            exact
            path='/solutions/custom'
            render={() => <Solutions solution='Custom' />}
          />
          <Route component={NotFound} />
          <Route
            exact
            path='/detail/:solution/:prod'
            component={Detail}
          ></Route>
          />
        </Switch>

but when i go to /detail/something/something it renders the default 'not found' component instead of rendering the 'detail' component and sending 'solution' and 'prod' as params

also, for the Solution component, instead of having the same component just with different props how can i specify the option of a param, for example:

<Route exact path='/solutions/:standard || custom' component={Solution} />

Upvotes: 0

Views: 339

Answers (1)

Ladi Adenusi
Ladi Adenusi

Reputation: 1082

For solutions, you can do something like this

  <Route path='/solutions/:path(custom|standard)' component={Solutions} />

This ensures that the route will only render when the path parameter is custom or standard.

You could also exclude (custom|standard) if you want to match other parameters, like this...

  <Route path='/solutions/:path' component={Solutions} />

For the detail route issue, move the all-route matcher <Route component={NotFound} /> to the last position in the <Switch>. This will ensure that all other routes will try to match before returning the NotFound component.

  <Switch>
    // All other routes
    <Route component={NotFound} />
  </Switch>

Upvotes: 1

Related Questions