title: React Router render components with /:username or /component/
body: <p>I am trying to implement a routing structure where a user goes to another user's page or their own when the path is /:username. I also want to render another page with a path /watch or /watch/ .. Facebook has a similar setup where /:username will take you to your page or another user's and /watch/ for example is a page. Is there best practice to achieve this with react-router?</p>
  
  <p>As of now I have something like this..</p>
  
  <pre><code>&lt;Route path="/" exact component={authenticated ? Home : Index} /&gt;
  &lt;Route path="/watch/" component={Watch} /&gt;
  &lt;Route path="/:username" exact component={({match}) =&gt; {
    if(match.params.username === data.Username) {
     return &lt;ProfilePage match={match} /&gt;
    } else {
     return &lt;UserPage match={match} /&gt;
    }
  }} /&gt;
  </code></pre>
  
  <p>Now if I got to /watch/ the profile component is being rendered aswell. So :username is going to match all my routes?</p>