React Router 4 and exact path with dynamic param

Question

I have issues with component being displayed on every single path because React Router 4 isn't using exact for that route (or so it appears).

<Route path="/" exact component={Explore} />
<Route path="/about" component={About} />

// The one making problems
<Route
    path="/:username"
    exact={true}
    render={props => <Profile {...props} />}
/>

So when I go to http://example.com/about, my Profile component is still being rendered. I guess the problem is in the route as it expects param :username and that goes right after / (root). Am I doing something wrong? I could add another route for /:username, like /profile/:username, but I'd like to keep it the way it is, if it's possible.

Answer 1

Assuming that you are not using Switch. Switch will solve your problem because it will only render the first path that matches.

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/:username" render={props => <Profile {...props} />} />
  <Route path="/" component={Explore} />
  <Route component={NotFoundPage} />
</Switch>