时间戳

首页 > 解决方案 > 如果我使用地图而不是静态组件，则路线会重新呈现

javascript - 如果我使用地图而不是静态组件，则路线会重新呈现

问题描述

我的应用程序中有 2 条路线，/validations（这是一个列表）和/validations/:id（这是针对特定项目的同一个列表）。

我最初静态地编写了我的路线并且一切正常（如预期的那样）：

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

但是，因为我想做一些重构，所以我将路由放在一个数组中并使用 a.map来渲染它们。但是这样，当我单击一个项目时，整个页面都会重新呈现，并且我会丢失列表的滚动（这对用户来说是一个糟糕的 UX，因为他失去了他在列表中的位置）：

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}
  />
))}

更奇怪的是，如果我删除了keypropRoute我会恢复初始行为（但我收到了 React 的警告）。

我是不是写错了什么？它是一个反应路由器错误吗？一个反应？

如何使用我的路线映射保持列表的滚动？

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

标签： javascriptreactjsreact-router

解决方案

我知道有些事情很可疑，因为我已经这样做了很多次，但我没有得到你的结果。所以我注意到你在你的路线中渲染了你的侧边栏。

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

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

就像在这个沙盒中一样：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：请不要介意我只是想看到一些有用的样式决定。

推荐阅读