React Router v4 components with similar paths (fixed and dynamic path param) are "overlapping"

Question

My routes are set up like this:

<Route path="/chat/:id" component={Chat} />
<Route path="/chat/new" component={NewChat} />

When I go to chat/new its also displaying {Chat}. Is there any way to exclusively call NewChat when I go to /chat/new?

Answer 1

You would make use of Switch and reorder your Routes, since Switch renders the first matched Route

<Switch>
   <Route path="/chat/new" component={NewChat} />
   <Route path="/chat/:id" component={Chat} />
</Switch>