title: React Router Dynamic Route: Invalid URL
body: <h2 id="in-react-router-lz2u">1) In React Router</h2>
  <p><code>&lt;Route path={&quot;/movie/:id&quot;} component={ResultPage} /&gt;</code></p>
  <h2 id="search-component-t9kk">2) Search Component</h2>
  <h3 id="when-i-search-for-movies-it-hits-the-api-and-displays-a-result-component.each-result-links-to-a-dynamic-route-above-jvqk">When I search for movies it hits the API and displays a <code>Result</code> component.Each result <code>Link</code>s to a dynamic route (above).</h3>
  <pre class="lang-js prettyprint-override"><code>&lt;div className=&quot;results&quot;&gt;
    {data.map((movie) =&gt; (
      &lt;Result
        poster_path={movie.poster_path}
        alt={movie.title}
        key={movie.id}
        id={movie.id}
        title={movie.title}
        overview={movie.overview}
        release_date={movie.release_date}
        genre_ids={movie.genre_ids}
      /&gt;
    ))}
  &lt;/div&gt;;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/5fICe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5fICe.jpg" alt="enter image description here" /></a></p>
  <h2 id="result-component-guaa">3) Result Component</h2>
  <h3 id="i-pass-some-props-in-the-link-and-use-props.location.state-to-fetch-the-rest-of-the-movies-data-for-this-resultpage-component-m6fs">I pass some props in the <code>Link</code> and use <code>props.location.state</code> to fetch the rest of the movie's data for this <code>ResultPage</code> component.</h3>
  <pre class="lang-js prettyprint-override"><code>export default function Result(props) {
    const { poster_path: poster, alt, title } = props;
  
    return (
      &lt;div className=&quot;result&quot;&gt;
        &lt;Link
          to={{
            pathname: `/movie/${title}`,
            state: { ...props },
          }}
        &gt;
          &lt;img
            src={
              poster
                ? `https://image.tmdb.org/t/p/original/${poster}`
                : &quot;https://www.genius100visions.com/wp-content/uploads/2017/09/placeholder-vertical.jpg&quot;
            }
            alt={alt}
          /&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <h2 id="resultpage-component-huoj">4) ResultPage component</h2>
  <h3 id="you-can-see-the-url-is-now-httpdisnyplus.plusmovieavengers-endgame-however-if-you-open-a-new-tab-and-copypaste-the-same-url-the-page-will-error-because-it-doesnt-have-all-the-data-is-my-guess-since-it-got-it-from-the-props-from-the-search-click-result-resultpage-flow-kt82">You can see the URL is now <code>http://disnyplus.plus/movie/avengers-endgame</code> however if you open a new tab and copy/paste the same URL the page will error because it doesn't have all the data is my guess, since it got it from the <code>props</code> from the Search -&gt; Click Result -&gt; ResultPage flow.</h3>
  <h3 id="is-there-another-approach-to-achieve-this-or-is-a-side-effect-of-using-dynamic-pages-and-passing-props-to-it-mwe0">Is there another approach to achieve this or is a side-effect of using dynamic pages and passing <code>props</code> to it?</h3>
  <p><a href="https://i.stack.imgur.com/kZjYm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kZjYm.jpg" alt="enter image description here" /></a></p>