如果我使用地图而不是静态组件,则路由会重新呈现

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

更奇怪的是,如果我删除了我的key支持,Route我会回到最初的行为(但我有一个React的警告).

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

如何通过路线映射保留列表的滚动？

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

Answer 1

首先，您需要映射应用程序组件外部的路由。然后您可以将它们添加到应用程序中的映射路线，例如{routeComponents}

const routeComponents = routes.map(({ path, component }, key) => <Route exact path={path} component={component} key={key} />);
const App = () => (<BrowserRouter><div>{routeComponents}</div></BrowserRouter>);

同样在validation.js中，您在{items.map ...}行中有警告。我在链接中添加了关键道具，错误消失了

      {items.map((item, index) => (
    <Link to={`/validations/${index}`} key={index}>
      Item {index}
    </Link>
  ))}

这是沙箱网址https://codesandbox.io/s/8n2rlpmw0l