小编bot*_*dev的帖子

出于学习目的，我尝试使用 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 …

我使用 React-Flow 来可视化 React 中组件的树形层次结构。每当您在 React-Flow 中创建自定义节点时，您都​​会在树中使用它，如下所示：

  <ReactFlow
      onLoad={onLoadTree}
      elements={nodesAndEdges}
      nodeTypes={{ reactComponent: ComponentNode }}

这使得无法传递道具。假设我想传递一些东西，那么如果语法类似于 ，我就可以做到这一点reactComponent: <ComponentNode myProps={myProps} />。有没有人以前使用过这项技术并且知道是否可以通过某种方式将道具传递给自定义节点？：） 谢谢！