title: React Routes colliding when i use an optional route for my main Page
body: <p>the question may sound confusing so let me explain it to you, basically i have some routes like these,</p>
  
  <pre><code>&lt;Route exact path="/:city?" component={HomePage} &gt;
  
  &lt;/Route&gt;
  
  &lt;Route path="/Register1" component={register1}&gt;
  
  &lt;/Route&gt;
  
  &lt;Route path="/Register2" component={register2}&gt;
  
  &lt;/Route&gt;
  
  </code></pre>
  
  <p>so the reason home page an optional parameter is that there's a part in my header where you can choose your city and based on that param, an <code>api</code> will be called and the page will re-render with new content,
  so the problem i'm facing here is when i want to go to another route, something like <code>/register1/</code> it considers it as city therefore calling api and not going to that route i was expecting,
  and i can use something like this for example</p>
  
  <pre><code>&lt;Route exact path="/province/:city?" component={HomePage} &gt;
  
  &lt;/Route&gt;
  </code></pre>
  
  <p>but since it's my main page, it seems a little bit off,
  so is there a way i can handle it without changing my other routes like <code>/register1</code> and so on?</p>