React-Router 在路由更改时重新安装组件

IT技术 javascript reactjs react-router react-redux jsx
2021-05-07 16:57:32

我有一个连接的(到 redux 商店)组件。我有多个路由都在渲染props中使用这个组件。在每次更改路线时,整个组件似乎都被重新安装。有什么办法可以防止这种情况发生吗?我的第一个想法是我可能每次都重新实例化组件,因为渲染props是一个响应路由器调用的函数?这是一些代码:

const routeFunction =
  (resource, props) => <CrudWrapper resource={resource} modelId={props.match.params.id} />

export default crudResources.map(resource => ({
  path: `/${resource}/:id?`,
  link: `/${resource}`,
  resource,
  // eslint-disable-next-line react/prop-types
  render: routeFunction.bind(null, resource)
}));

然后将路由映射到 JSX 中: {routes.map(route => <Route key={route.path} {...route} />)}

我将路由包裹在 a 中,<Switch>并认为这可能是导致问题的原因,但即使在移除开关后,componentWillMount每次都会调用组件的方法。

1个回答

问题似乎与路线上的关键props有关。当我省略 key props时,组件不会重新安装。一旦我添加它,无论字符串是什么,都会重新安装路由。

编辑:

这是我的坏事。由于所有路由都有不同的键,react 会重新挂载它们,因为它们都不同。见这里:https : //github.com/ReactTraining/react-router/issues/5972