使用映射函数创建多个路由时，相同的组件在具有键时总是卸载

Question

v5.2.0

当使用 map 函数创建多个路由时，同一个组件总是重新渲染，尽管文档说在多个路由上使用同一个组件不应触发卸载。

更奇怪的是 key prop 以某种方式相关：当它被删除时，卸载不再发生。

在第 1 页和第 2 页（由地图生成）之间切换总是会卸载它们，而在第 3 和第 4 页之间切换则不会。

const privatePages = [
  {
    path: '/page1',
    component: <Page num='1' />
  },
  {
    path: '/page2',
    component: <Page num='2' />
  }
]

function Page({ num }) {
  useEffect(() => {
    console.log(`page ${num} mount`)
    return () => { console.log(`page ${num} unmount`) }
  }, [])

  return <div>page {num}</div>
}

export default function App() {
  return (
    <Router>
      <Switch>
        {privatePages.map((page, index) => (
          <Route key={index} path={page.path}>
            {page.component}  // <=========== Unmounts each time switching between 1 and 2
          </Route>
        ))}

        <Route path='/page3'>
          <Page num='3' />   // <============ No unmounts between 3 and 4
        </Route>
        <Route path='/page4'>
          <Page num='4' />
        </Route>
      </Switch>
    </Router>
  )
}

工作示例：https://codesandbox.io/s/jolly-wave-g1g82?file=/src/App.js:0-1399

Answer 1

发生这种情况是因为当您在页面 1 和页面 2 之间切换时，索引以及 key 属性的值发生变化。每当 key 属性发生变化时，组件将重新挂载（卸载然后坐骑）。

您可以在此处阅读有关 key 的更多信息：https://reactjs.org/docs/lists-and-keys.html

使用映射函数创建多个路由时，相同的组件在具有键时总是卸载

When creating multiple Routes with a map function the same component always unmounts when it has key

array-map

reactjs

react-router

react-router-dom