javascript 无法定位到关键 prop 的来源警告，realated React Router v6的Route组件

q35jwt9p 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(158)

我在控制台中遇到提示的此错误。我不知道是哪个列表导致了这个错误。我可以知道有没有一种方法，我可以追溯到这个错误的起源，所以我知道在哪里解决这个错误？
我正在使用实现列表的React Router组件。这就是为什么它需要一个关键的 prop
警告：列表中的每个子元素都应该有一个唯一的“键”属性。
检查IndexRouter的渲染方法。有关详细信息，请参阅https://reactjs.org/link/warning-keys。

<Routes>
      <Route path="/login" element={LazyLoad("login/Login")} />
      <Route path="/app" element={LazyLoad("sandbox/Sandbox")}>
        <Route path="" element={<Navigate to={"home"} />} />
        <Route path="*" element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />
        {routeList.map((item) => {
          if (checkPagePermission(item) && checkUserPermission(item)) {
            return (
              <Route
                path={item.key.slice(1)}
                key={item.key.slice(1)}
                element={<AuthComponent>{LazyLoad(LocalRouterMapping[item.key])}</AuthComponent>}
              />
            );
          }
          return <Route path="*" element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />
          //Use return null instead  👈👈👈
        })}
      </Route>
      <Route path="/" element={<Navigate to={"/app"} />} />
      <Route path="*" element={LazyLoad("notFound/NotFound")} />
    </Routes>

所以，我设法解决了这个错误，在“if case”中添加了“Route”的键，以及“noPermission路由”。
我想我在这里做了一些无用的额外努力，我应该直接返回null，而不是再次返回noPermission路由。

JavaScript

来源：https://stackoverflow.com/questions/75735994/unable-to-locate-to-the-origin-of-the-key-props-warning-realated-the-react-rout

2条答案

按热度按时间

2fjabf4q1#

在你的代码里

{
  routeList.map((item) => {
    if (checkPagePermission(item) && checkUserPermission(item)) {
      return <Route path={item.key.slice(1)} key={item.key.slice(1)} element={<AuthComponent>{LazyLoad(LocalRouterMapping[item.key])}</AuthComponent>} />;
    }
    return <Route path="*" element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />;
  })
}

当权限检查失败时，为每个项目返回<Route path="*" ...。
你没有key。添加path={item.key.slice(1)}应该可以修复它。
所以

{
  routeList.map((item) => {
    if (checkPagePermission(item) && checkUserPermission(item)) {
      return <Route path={item.key.slice(1)} key={item.key.slice(1)} element={<AuthComponent>{LazyLoad(LocalRouterMapping[item.key])}</AuthComponent>} />;
    }
    return <Route path="*" key={item.key.slice(1)} element={<AuthComponent>{LazyLoad("noPermission/NoPermission")}</AuthComponent>} />;
  })
}

赞(0）回复(0）举报 2023-05-05

g6ll5ycj2#

所以，我设法解决了这个错误，在“if case”中添加了“Route”的键，以及“noPermission路由”

赞(0）回复(0）举报 2023-05-05