React Router v6 子路由不渲染

Question

使用 React Router v6 我想渲染回调页面。尽管我无法从屏幕中的 element 属性获取输出。我只从 out 获取输出，并且回调页面始终是空白屏幕或 404。新的 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>
  </>
);

另外使用Outlet似乎并不能解决问题..

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>
  </>
);

它BrowserRouter在我的Root组件中，它正在渲染App。

正如预期的输出，我不需要路由本身auth显示任何内容（就像使用<Outlet />，尽管我确实尝试过），但我只希望显示子路由。

Answer 1

这与您的示例并不严格相关（因为您在子路线中使用了确切的路径），但我遇到了类似的问题并认为它可能相关。我通过将index属性添加到子路由中解决了这个问题。根据 Outlet 的文档：

如果父路由完全匹配，则将渲染子索引路由；如果没有索引路由，则不渲染任何内容。

使用您的最后一个示例，如果您的用例类似，则类似的内容应该可以工作：

 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>
  </>
);

（请注意，这仅是说明性的，因为在这个简单的示例中不需要使用 Outlet 和子路由）