BrowserRouter basename prop issue when upgrading to v6

Question

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?

Root.tsx

<BrowserRouter basename="/config2">
  <IntlProvider
    messages={
      LanguageOptions.find((option) => {
        return option.locale === appState.locale;
      })?.fileName
    }
    locale={appState.locale}
    defaultLocale="en"
  >
    <ThemeProvider>{children}</ThemeProvider>
  </IntlProvider>
</BrowserRouter>

This is where I am using browser router.

App.tsx

<>
  <GlobalAlert />
  {/* TODO: remove this once no longer necessary, after disconnecting legacy DCUI */}
  {isAuthenticated && !legacyView && (
    <div className={classes.app}>
      {loadingCountryOptions ? (
        <div className={classes.progressBar}>
          <CircularProgress size="30px" />
        </div>
      ) : (
        <>
          <Header />

          <div className={classes.appContent}>
            <Routes>
              <Route path="/" element={<ProtectedRoutes />}>
                <Route path="/configuration/configure" element={<Configuration />} />
                <Route path="/configuration" element={<SummaryPage />} />
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/appointments" element={<Appointments />} />
                <Route path="/" element={<Navigate replace to="/configuration" />} />
                <Route path="*" element={<NotFound />} />
              </Route>
            </Routes>
          </div>

          <Footer />
        </>

This is where I am listing all of my other page routes.

The console error I am getting

Answer 1

The basename prop should match where your app is deployed/running from. In this case it is running from a "/config2" subdirectory. You are currently accessing "localhost:3000/" and not "localhost:3000/config2".

The local development server doesn't know to start from the "./config2" directory.

The errors occur when the app is trying to match absolute paths to the router's basename that is a different directory. I can't reproduce any of the errors when running the app from the "/config2" directory like the app is expecting.

Manually navigate to "/config2" locally. You may want to also add a "homepage": "./config2" or "homepage": "." entry to your package.json so routes can work relative from the deployment directory.

See Building for Relative Paths for more detail.