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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent, 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.

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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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 ponent, 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.

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Jan 18, 2022 at 9:55 ronnyrr asked Jan 18, 2022 at 9:50 ronnyrrronnyrr 1,58144 gold badges2929 silver badges4848 bronze badges 3

• Just to debug, using <Route path="/" element={<Home />} /> have you the same oute? – Emanuele Scarabattoli Commented Jan 18, 2022 at 9:58
• Yes, with and without the Private/Public routes. Home and Login to work fine :) – ronnyrr Commented Jan 18, 2022 at 10:01
• Additionally, here an example for nested routes reactrouter./docs/en/v6/getting-started/… – Emanuele Scarabattoli Commented Jan 18, 2022 at 10:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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>

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 ponent={Home} />} />
        <Route path="/login" element={<PublicRoute ponent={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)