如何通过密钥来反应路线？

Question

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

路由.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>
  );
}

私人路线

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

JS 中的 map 函数为您提供的函数提供了第二个参数，即当前迭代的索引。React 社区建议，如果您无法使用其他属性，则可以使用它。

所以你可以这样做：

...

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

return ...

那应该有效。