reactjs - 如何通过 key 来 react 路线？

Question

我正在根据角色分离路线。每个 PrivateRoute 都是一个路由。

Route.tsx

export default function MCRoutes({ isUserAuthenticated, role }) {
  const token = useFetchToken();
  // const { data } = useFetchDataFromState("activeModule");

  let privateRoutes = mcRoutesConfig[role].routes.map(
    ({ id, component, path, exact }) => (
      <PrivateRoute
        // key={id}
        exact={exact}
        isUserAuthenticated
        path={path}
        component={component}
      />
    )
  );

  return (
    <Switch>
      {privateRoutes}
      <Route component={NoPageFound} />
    </Switch>
  );
}

私有(private)路线

export default function PrivateRoute({
  component: Component,
  isUserAuthenticated,
  ...props
}) {
  return (
    <Route
      {...props}
      render={innerProps => {
        return isUserAuthenticated ? (
          <PrivateLayout>
            <Component {...innerProps} />
          </PrivateLayout>
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        );
      }}
    />
  );
}

但是当我这样做时，React 要求我为 map 函数中的每个项目提供键。如果我将 key 作为 prop 传递，那么它会在路由更改时重新安装组件。如何解决这个问题？

Answer 1

我的解决方案是对所有路由使用相同的 key 。没有警告，似乎它工作得很好。

const Routes = ({ routes }) => {
    return (
        <Switch>
            {routes.map(props => {
                return <RouteWithLayout key={1} {...props} />
            })}
        </Switch>
    )
}

这很可能是由于 Switch作品。它将检查路径并呈现唯一一个完全匹配的路径。