How to add elements in react router v6 with props

Question

In react router V6, we write the routes in this fashion-

<BrowerRouter>
  <Routes>
    <Route path="..." element={<div> ... </div>} />
    <Route path="..." element={<div> ... </div>} />
  </Routes>
</BrowerRouter>

Now if I want to insert an element which depends on props, say an array of names (which is defined as another component) then in react router's older versions, it was possible to pass props to the element using inline function but my question is that how we can do the same in V6?

Answer 1

If you're referring to just random props provided to the component at this level you can just do this:

<BrowerRouter>
  <Routes>
    <Route path="..." element={ <div> <MyComponent namesList={["John Doe"]} /></div> } />
    <Route path="..." element={ <div> ... </div> } />
  </Routes>
</BrowerRouter>

If you want to make use of the router props inside your components you can do so using the useLocation, useNavigate or useParams hooks within your component for this.

Another option is to create a HOC like this:

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

Then use it on your component like this:

const MyComponent = (routerProps) => (...)

export default withRouter(MyComponent)