title: BrowserRouter basename prop issue when upgrading to v6
body: <p>I am upgrading from React Router v5 to v6. When I run the app there is no basename in the url and nothing loads, when I add /config2 to the url everything shows up. I'm getting an error with v5 BrowserRouter basename prop. I'm trying to solve this issue with React router v6 but haven't found a solution. It was working fine with v5. Any solutions?</p>
  <p><strong>Root.tsx</strong></p>
  <pre><code>&lt;BrowserRouter basename=&quot;/config2&quot;&gt;
    &lt;IntlProvider
      messages={
        LanguageOptions.find((option) =&gt; {
          return option.locale === appState.locale;
        })?.fileName
      }
      locale={appState.locale}
      defaultLocale=&quot;en&quot;
    &gt;
      &lt;ThemeProvider&gt;{children}&lt;/ThemeProvider&gt;
    &lt;/IntlProvider&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  <p>This is where I am using browser router.</p>
  <p><strong>App.tsx</strong></p>
  <pre><code>&lt;&gt;
    &lt;GlobalAlert /&gt;
    {/* TODO: remove this once no longer necessary, after disconnecting legacy DCUI */}
    {isAuthenticated &amp;&amp; !legacyView &amp;&amp; (
      &lt;div className={classes.app}&gt;
        {loadingCountryOptions ? (
          &lt;div className={classes.progressBar}&gt;
            &lt;CircularProgress size=&quot;30px&quot; /&gt;
          &lt;/div&gt;
        ) : (
          &lt;&gt;
            &lt;Header /&gt;
  
            &lt;div className={classes.appContent}&gt;
              &lt;Routes&gt;
                &lt;Route path=&quot;/&quot; element={&lt;ProtectedRoutes /&gt;}&gt;
                  &lt;Route path=&quot;/configuration/configure&quot; element={&lt;Configuration /&gt;} /&gt;
                  &lt;Route path=&quot;/configuration&quot; element={&lt;SummaryPage /&gt;} /&gt;
                  &lt;Route path=&quot;/dashboard&quot; element={&lt;Dashboard /&gt;} /&gt;
                  &lt;Route path=&quot;/appointments&quot; element={&lt;Appointments /&gt;} /&gt;
                  &lt;Route path=&quot;/&quot; element={&lt;Navigate replace to=&quot;/configuration&quot; /&gt;} /&gt;
                  &lt;Route path=&quot;*&quot; element={&lt;NotFound /&gt;} /&gt;
                &lt;/Route&gt;
              &lt;/Routes&gt;
            &lt;/div&gt;
  
            &lt;Footer /&gt;
          &lt;/&gt;
  </code></pre>
  <p>This is where I am listing all of my other page routes.</p>
  <p><a href="https://i.stack.imgur.com/7rHvg.png" rel="nofollow noreferrer">The console error I am getting</a></p>