title: How to copy and paste react app URI and return the correct page?
body: <p>I have a simple front-end React app with no back-end. I want to be able to open a new tab with a given URI and be able to return the correct page with results. I'm using react-router-dom v5 for routing:</p>
  
  <pre><code>&lt;Router&gt;
     &lt;Route exact path="/" render={/* component with props*/}/&gt;
     &lt;Route path="/search" render={/* component with props*/}/&gt;
     &lt;Route exact path="/search/:name" render={/* component with props*/}/&gt;
     &lt;Route exact path="/search/:name/artist=:selection/albums" render={/* component with props*/}/&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>In the app if i searched in the search bar for "jason", results would show among others, and I could click on "jason aldean". When I click jason aldean, the URI is: "<a href="http://localhost:3000/search/jason/artist=jason%20aldean/albums" rel="nofollow noreferrer">http://localhost:3000/search/jason/artist=jason%20aldean/albums</a>". I want to be able to copy and paste that same link in a new tab and show the exact same results.</p>
  
  <p>In order to even get results, my app gets an access token from spotify's API. This is handled in the "/" route (login button triggers spotify login). Once login is complete, /search will be rendered with the access token in the URI, then I render /search without the access token in the URI, but saved in the app.</p>
  
  <p>In short what needs to happen when copying a URI in a new tab is:</p>
  
  <ol>
  <li>Redirect to spotify's login to retrieve access token</li>
  <li>Redirect to "/search"</li>
  <li>Redirect based off of the URI params</li>
  </ol>