score:0

Accepted answer

issue

element={((<home />), (<header />))}> is actually a comma operator expression, which when evaluated returns the value of the last operand, <header /> in your case.

solution

to convert the react-router-dom@5 code

</switch>
  ...
  <route path="/home">
    <header />
    <home />
  </route>
</switch>

to react-router-dom@6 api/syntax, replace the switch component with the routes component and move the routed content onto the route component's element prop:

<routes>
  ...
  <route
    path="/home"
    element={(
      <>
        <header />
        <home />
      </>
    )}
  />
</routes>

if rendering the header component with several routes it is common to create layout routes that render common ui and an outlet for nested routes to render their element into.

example:

import { outlet } from 'react-router-dom';

const headerlayout = () => (
  <>
    <header />
    <outlet />
  </>
);

...

<routes>
  ... routes w/o header
  <route element={<headerlayout />}>
    <route path="/home" element={<home />} />
    ... other routes to render with header
  </route>
</routes>

score:0

to upgrade your package to v6 you need to first uninstall react-router-dom package & then try to install using the below command-

npm install react-router-dom@6


Related Query

More Query from same tag