react-router-dom - add param to index url but accept page

Question

Currently I have the following code:

<Router history={history}>
  <div>
    <Route exact path="/:id?" component={Container1} />
    <Route path="/component2/ component={Container2} />
  </div>
</Router>

"localhost:3000" returns Container 1 (as expected).

"localhost:3000/123" returns a different view of Container 1 (as expected).

However when I navigate to "localhost:3000/component2/" it appears along side Component 1.

My question is how can I make the index route take both an id but still accept a component?

Answer 1

You can try to wrap these two routes in Switch , like this:

<Router history={history}>
  <div>
    <Switch>
      <Route path="/component2/" component={Container2} />
      <Route exact path="/:id?" component={Container1} />
    </Switch>
  </div>
</Router>

Answer 2

React Router handles the routes with the same priorities as in which order did they get defined. So in your case it should be

<Router history={history}>
  <div>
    <Route path="/component2/ component={Container2} />
    <Route exact path="/:id?" component={Container1} />
  </div>
</Router>