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

Question

v5.2.0

When creating multiple Routes with a map function, the same component always re-renders, although the docs say that using the same component on multiple routes should not trigger an unmount.

What is even weirder is that it is the key prop that is somehow related: when it is removed, the unmounting does not happen anymore.

Switching between pages 1 and 2 (generated by map) always unmounts them, whereas switching between 3 and 4 does not.

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

Working example: https://codesandbox.io/s/jolly-wave-g1g82?file=/src/App.js:0-1399

Answer 1

This happens because the index, and thus the value of the key prop changes when you switched between pages 1 and 2. Whenever the key prop changes, the component remounts (unmounts and then mounts).

You can read more about key here: https://reactjs.org/docs/lists-and-keys.html