Nested routes in React Router 4. The 'user1/commit1' link fires the component for 'user1/'. How can this be done properly?

Question

React

The link '/user1/commit1' triggers the component for '/user1/', not for 'user1/commit1/'
Code snippet:

<Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/:user" component={UserPage} />
        <Route path="/:user/:commit" component={CommitPage} />
</Switch>

Simple example:
sandbox.io
How can I fix this?
What should be studied in order to understand the issue?
UPD:
First clumsy solution:

<Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/:user" component={UserPage} />
        <Route path="/:user/:commit" component={CommitPage} />
</Switch>

Is this correct?

Answer 1

How can this be fixed?

Add exact - I see that you figured it out yourself. You can also change the order of the routes (the first matching one is rendered):

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/:user/:commit" component={CommitPage} />
  <Route path="/:user" component={UserPage} />
</Switch>

What should be studied in order to understand the issue?

Documentation .