Passing and spreading props in React Router Dom v 6

Question

I have the below working in RRD v 5.3.0 but cant get an alternative version working in v6. Ive tried using 'element' but it doesn't seem to work

    <BrowserRouter>
        <Route render={props => (
            <>
                <Header {...props}/>
                <Routes/>
                <Footer/>
            </>
        )}/>
    </BrowserRouter>

Answer 1

Version 6 no longer supports the render function style. Instead the preferred approach is to use the use hooks (eg, useLocation, useParams) in the child component to access whatever values are needed.

For example, if header was previously expecting to get location and match via its props:

const Header = ({ match, location }) => {
  // ...
}

It would now do:

const Header = () => {
  const location = useLocation();
  const match = useMatch();
  // ...
}

If header can't be modified for some reason, then you could make a component that uses these hooks, and then passes the values down to the header as props:

const Example = () => {
  const location = useLocation();
  const match = useMatch();
  return (
    <>
      <Header location={location} match={match}>
      <Routes/>
      <Footer/>
    <>
  ) 
}

// used like:
<Route>
  <Example/>
</Route>

For a guide on updating from version 5 to 6, see this page

For information about why they made this change, see this article