Uncaught Error: You cannot render a <Router> inside another <Router>.

[apetersonflc]

Update: just found the section where nested Routers were no longer supported in v6. Looks like there was one buried deep in the Home component.
Extra info: https://blog.logrocket.com/migrating-react-router-v6-guide/#nested-routers-support

A project Im on needs to be upgraded to v6, so I am following the v5->v6 guide, but I have run into an issue. Step 3 states that we need to add a CompatRouter below the BrowserRouter, however, I receive the following error when I do:

Uncaught Error: You cannot render a Router inside another Router. You should never have more than one in your app.

The relevant code looks like this.

import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { CompatRouter, CompatRoute } from "react-router-dom-v5-compat";

<BrowserRouter>
  <CompatRouter>
    <Switch>
      <Route exact path="/" component={Home} />    
      {/* other similar routes */}
    </Switch>
  </CompatRouter>
</BrowserRouter>

I've also tried the CompatRoute with the exact same message:

<CompatRoute exact path="/" children={<Home/>} />               

package-json versions (have not installed latest react-router-dom yet):

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-dom-v5-compat": "^6.7.0",

Any ideas for how I can debug this or what I am doing wrong? FWIW, there are two context providers being loaded above the BrowserRouter.

[vladinator1000]

I'm having this issue in Remix. For debugging the only thing that works for me is to uncomment components until it starts rendering again... Fix by rendering offending components as "ClientOnly".

function useMounted() {
  const [hasMounted, setHasMounted] = useState(false)
  useEffect(() => {
    setHasMounted(true)
  }, [])
  return { hasMounted }
}

export function ClientOnly(props: { children: React.ReactNode }) {
  const { hasMounted } = useMounted()

  if (!hasMounted) {
    return null
  }

  return props.children
}

[ExiledOtie]

Switch doesn't exist in react-router-dom.

export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_ErrorResponseImpl, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, replace, resolvePath, unstable_HistoryRouter, unstable_usePrompt, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit, useViewTransitionState)