React Router v6 child route not rendering

Question

With React Router v6 I want to render the callback page. Although I'm not able to get the output from the element prop in my screen. I'm only getting the output from out and always a blank screen or a 404 for the callback page. What am I missing with the new React Router?

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/*" element={<p>auth</p>}>
          <Route path="callback" element={<p>callback</p>} />
        </Route>
      </Routes>
    </Suspense>
  </>
);

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/callback" element={<p>callback</p>} />
      </Routes>
    </Suspense>
  </>
);

Also using an Outlet doesn't seem to solve the problem..

const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/*" element={<><p>auth</p><Outlet /></>}>
          <Route path="callback" element={<p>callback</p>} />
        </Route>
      </Routes>
    </Suspense>
  </>
);

The BrowserRouter is in my Root component, which is rendering App .

As expected output I do not need the auth route itself the show anything (like with an <Outlet /> , although I did try it), but instead I only want the child route to display.

Answer 1

You need to render an Outlet for nested routes to be rendered into.

import { Outlet } from 'react-router-dom';

...

<Route
  path="/auth/*"
  element={(
    <>
      <p>auth</p>
      <Outlet /> // <-- nested routes rendered out here
    </>
  )}
>
  <Route path="callback" element={<p>callback</p>} />
</Route>

Answer 2

This doesn't strictly relate to your example (since you're using an exact path in the child route) but I ran into a similar issue and figure it may be related. I solved it by adding the index property to the child route. According to the docs for Outlets:

If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Using your final example, something like this should work if your use case is similar:

 const App: React.FC = () => (
  <>
    <GlobalStyle />
    <Suspense fallback={<Loading fullScreen />}>
      <Routes>
        <Route path="/" element={<PrivateRoute component={Home} />} />
        <Route path="/login" element={<PublicRoute component={Login} />} />
        <Route path="/auth/callback" element={<><p>auth</p><Outlet /></>}>
          <Route index element={<p>callback</p>} />
        </Route>
      </Routes>
    </Suspense>
  </>
);

(Note this only meant to be demonstrative, since the use of the Outlet and child Route are unnecessary in this simplistic example)