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

Posted 2023-02-21

【中文标题】React-Router 在路由更改时重新安装组件

【英文标题】：React-Router re-mounts component on route change

【发布时间】：2018-08-06 02:35:04

【问题描述】：

我有一个已连接（连接到 redux 商店）的组件。我有多个路由都在渲染道具中使用这个组件。每次更改路线时，似乎都会重新安装整个组件。有什么办法可以防止这种情况发生吗？我的第一个想法是我可能每次都重新实例化组件，因为 render prop 是一个响应路由器调用的函数？这是一些代码：

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 方法也会每次都被调用。

【问题讨论】：

`routes.map(route => )> 当你使用组件（而不是下面的渲染或子组件）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件属性提供内联函数，您将在每次渲染时创建一个新组件。这会导致卸载现有组件并安装新组件，而不仅仅是更新现有组件。

我将如何防止这种情况发生，奥马尔？我必须使用渲染道具才能传递资源。有什么方法可以将它实例化一次并在渲染道具中重新使用它？

【参考方案1】：

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

编辑：

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