javascript - React Router v6 child route not rendering - Stack Overflow

admin管理员组

文章数量:1405170

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)

本文标签： javascriptReact Router v6 child route not renderingStack Overflow