javascript - React-Router 在路由更改时重新挂载组件

Question

我有一个连接(到 redux 存储)组件。我有多个路由都在渲染 Prop 中使用此组件。在每次路由更改时，整个组件似乎都被重新安装了。有什么办法可以防止这种情况发生吗？我的第一个想法是我可能每次都重新实例化组件，因为 render prop 是一个 react 路由器调用的函数？这是一些代码:

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


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

Answer 1

问题似乎与路线上的关键 Prop 有关。当我省略 key Prop 时，不会重新安装组件。我一加，不管字符串是什么，路由都重新挂载。

编辑:

这是我的错。由于所有路由都有不同的 key ，因此 react 将重新安装它们，因为它们都是不同的。看这里:https://github.com/ReactTraining/react-router/issues/5972