使用动态参数反应路由器4和确切路径

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>