如何 "wrap" <Route> 组件，以便它可以在 React 中的 <Router> 内部使用？

Question

我创建了 <RequireAuthRoute>，它只是 returns 它的子项或导航到 /login。然而，它的使用方式并不令我满意。看看这个片段：

<Route
  path=''
  element={
    <RequireAuthRoute>
      <Explorer />
    </RequireAuthRoute>
  }
/>

所以是的 - 从技术上讲它是有效的，但我想做的是为 <Route> 组件创建包装器，所以它最终看起来像这样：

<ProtectedRoute path='' element={<Explorer/>}/>

阻碍我的是 react-router 本身，它告诉我 <Router> 直接子级只能是 <Route> 组件。有什么解决方法吗？

Answer 1

自定义路由组件在 react-router-dom@6 中无效，就像在 v5.

中常用的那样

<ProtectedRoute path='....' element={<Explorer />} />

以上将引发不变违规，因为只有 Route 和 React.Fragment 是Routes 组件和 Route 组件只能由 Routes 组件或另一个 Route 组件直接渲染。

如果使用 RequireAuthRoute 等包装器组件不够：

<Route
  path='....'
  element={
    <RequireAuthRoute>
      <Explorer />
    </RequireAuthRoute>
  }
/>

然后另一个常见的 v6 模式是使用 layout routes 为嵌套路由呈现 Outlet 组件而不是 children prop。

示例：

import { Navigate, Outlet, useLocation } from 'react-router-dom';

const AuthLayout = () => {
  const location = useLocation();
  ... business logic ...

  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login replace state={{ from: location }} />
};

然后用这个布局路由包裹渲染你想保护的路由：

<Route element={<AuthLayout />}>
  <Route path='....' element={<Explorer />} />
  ... other protected routes ...
</Route>
... other unprotected routes ...

如何 "wrap" <Route> 组件，以便它可以在 React 中的 <Router> 内部使用？

How to "wrap" <Route> component so that it can be used inside <Router> in React?

reactjs

react-router