title: Restrict Back Button React Router
body: <p>I would like to restrict access to my router and disabled the back button.</p>
  <p>For example, if the user manually types on the browser tab or click in an URL besides <code>event/:eventId</code>, I want to redirect it to <code>event/:eventId</code></p>
  <p>Current:</p>
  <ol>
  <li>The user visits <code>event/1234/friends</code>.</li>
  <li>It gets redirected to <code>event/1234</code></li>
  <li>The user clicks the back button and is be able to see  <code>event/1234/friends</code>. (It should <strong>not</strong> be able to visit <code>event/1234/friends</code>).</li>
  </ol>
  <p>Note: This bug only happens on mobile. You can't reproduce it on desktop.</p>
  <p>Desired:</p>
  <ol>
  <li>The user visits <code>event/1234/friends</code>.</li>
  <li>It gets redirected to <code>event/1234</code></li>
  <li>Disable the back button or if the user clicks the back button, won't be able to visit  <code>event/1234/friends</code></li>
  </ol>
  <p>This how my code looks like</p>
  <pre><code> const eventPathname = props.history?.location?.pathname;
    const matches = eventPathname.match(/^\/event\/([^/]+)\/.+$/);
    if (!!matches) {
      const defaultPathname = `/event/${matches[1]}`;
      props.history.length = 1;
      window.location.replace(defaultPathname);
      props.history.push(defaultPathname);
    }
  </code></pre>
  <p>And here is a code sandbox:</p>
  <p><a href="https://codesandbox.io/s/keen-silence-47ztr" rel="nofollow noreferrer">https://codesandbox.io/s/keen-silence-47ztr</a></p>
  <p>Remember that you can't reproduce it on desktop, only on mobile.</p>
  <p>I checked several threads on StackOverflow like <a href="https://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history">1</a>, <a href="https://stackoverflow.com/questions/31084779/how-to-restrict-access-to-routes-in-react-router">2</a>, <a href="https://stackoverflow.com/questions/30915173/react-router-go-back-a-page-how-do-you-configure-history">3</a>, <a href="https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4">4</a> but I couldn't find a proper answer. Any help of how can I achieve this?</p>