javascript - 如果我使用 map 而不是静态组件，路由会重新渲染

Question

我的应用程序中有 2 条路线，/validations(这是一个列表)和 /validations/:id(这是专注于特定项目的同一个列表).

我最初静态地编写了我的路线并且一切正常(如预期的那样):

<Route path="/validations/:id" component={Validations} />
<Route path="/validations" component={Validations} />

但是，因为我想做一些重构，所以我将路由放在一个数组中并使用 .map 来呈现它们。但是有了这个，当我点击一个项目时，整个页面重新呈现并且我失去了列表的滚动(这对用户来说是一个糟糕的用户体验，因为他失去了他在列表中的位置):

const routes = [
  {
    path: '/validations/:id',
    component: Validations,
  },
  {
    path: '/validations',
    component: Validations,
  },
]

// ...and in the JSX...

{routes.map(({ path, component }) => (
  <Route
    key={path}
    path={path}
    component={component}
  />
))}

更奇怪的是，如果我删除 Route 的 key Prop ，我会恢复初始行为(但 React 会发出警告)。

我写错了吗？这是一个 react 路由器错误吗？一个 React 吗？

我怎样才能让列表的滚动与我的路线映射保持一致？

这是一个复制品:https://codesandbox.io/s/vm71x2k46l

Answer 1

我知道有些事情是可疑的，因为我已经做过很多次了，但我没有得到你的结果。所以我注意到您在路线内部呈现了侧边栏。

这就是它重新渲染并将所有内容设置到顶部的原因。因为您实际上导航到另一条路线。

您必须做的是将边栏链接设置在外部实际路由但内部路由器组件。

就像在这个沙盒中一样:https://codesandbox.io/s/p2r4pl2o3q

如果您注意到我稍微更改了路线:

const routes = [
  {
    path: "/",
    component: Index
  },
  {
    exact: true,
    path: "/validations",
    component: Validations
  },
  {
    path: "/validations/:id",
    component: Validations
  }
];

然后创建侧边栏组件并将其设置在路由之外

<BrowserRouter>
  <div>
    <Sidebar />
    <div style={{ marginLeft: 150 }}>{routeComponents}</div>
  </div>
</BrowserRouter>

边栏:

var items = Array.apply(null, Array(300)).map(function(x, i) {
  return i;
});

export default () => (
  <div
    style={{
      width: 150,
      height: "100vh",
      display: "flex",
      overflow: "auto",
      position: "absolute",
      flexDirection: "column"
    }}
  >
    {items.map((item, index) => (
      <Link to={`/validations/${index}`} key={index}>
        Item {index}
      </Link>
    ))}
  </div>
);

现在因为第一次点击滚动不会重置。

PS:请不要介意我只是想看看有什么效果的样式决定。