React-router v6 路由组合。是否可以呈现自定义路线？

Question

出于学习目的，我正在尝试使用 React-Router v6 创建一个受保护的自定义路由。正如我之前在论坛或此处尝试过的许多人一样，我收到此错误：错误：[ProtectedRoute] 不是组件。

此外，如果有人正在为不可重用的实现而苦苦挣扎，可以在下面查看我的工作代码：我的问题是我真的希望它是可重用的，这样我就可以避免这种混乱的代码。如果您有任何想法，请告诉我。

我个人认为由于当前的 V6 实现，这有点不可能。也许他们将来会让我们这样做。但我希望这篇文章能帮助那些想要保护路由的人，尤其是在使用 Parse 平台时。

自定义路线：

const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        <AuthWrapper>
          <Component {...rest} {...props} />
        </AuthWrapper>;
      }}
    />
  );
};

包装器使用 Parse Server 在用户当前未登录时保护路由。

const AuthWrapper = ({ children }) => {
  if (Parse.User.current() !== null) {
    let isAuthenticated = Parse.User.current().getSessionToken();
    let authCondition = isAuthenticated !== undefined;
    if (authCondition) {
      return children;
    }
  }
  return <Navigate to={"/login"} />;
};

export default AuthWrapper;

没有自定义路线的工作解决方案：（ofc 没有<ProtectedRoute />）

<Route
  path="/book"
  element={
    <AuthWrapper>
       <BookPage />
    </AuthWrapper>
  }
/>

我想做什么：

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

Answer 1

react-router-dom v6 不支持，我也不怀疑它会支持自定义路由组件，就像以前版本中使用的那样，现在更喜欢组合。您已经正确地创建了一个包装一些内容的AuthWrapper 组件，这就是v6 authentication example from the docs。

但它可以改进。除了返回单个 children 节点之外，您还可以返回一个 Outlet 用于要渲染到的嵌套 Route 组件。这会将AuthWrapper 组件从包装组件转换为布局组件。

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

const AuthLayout = () => {
  if (Parse.User.current() !== null) {
    const isAuthenticated = Parse.User.current().getSessionToken();
    return isAuthenticated ? <Outlet /> : null; // or loading indicator, etc...
  }
  return <Navigate to={"/login"} replace />;
};

这允许您将单个 AuthLayout 组件渲染为 Route，并在其中嵌套任意数量的受保护路由。

<Route element={<AuthLayout />}>
  <Route path="/book" element={<BookPage />} />
  ... other protected routes ...
</Route>

Answer 2

我认为这会解决它。你错过了 render prop 中的 return。

const ProtectedRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => {
        return (<AuthWrapper>
          <Component {...rest} {...props} />
        </AuthWrapper>);
      }}
    />
  );
};