How to pass props within components with react-router v6

Question

I'm struggling to pass props between components with react-rouer v6

Here is the routes in App.tsx, I want to pass props from the component (Home) which redirect to this one (EditUser)

<Routes>
    <Route path={ROUTES.HOME} element={<Home />} />
    <Route path={ROUTES.EDIT_USER} element={<EditUser props />} />
</Routes>

The home page have some functionality to render a table with users

Here is the function to navigate to the EditUser page to be able to edit
I want to be able to pass one of the users once the button "edit" is clicked (I added the state since I read that was the way to acces from the Edit User page)

  const handleEdit = (user: IUser) => {
    navigate(ROUTES.EDIT_USER, {
      state: {
        user,
      },
    });
  };

The edit button (Redirection is working It's just the fact to pass that user from components)

<EditButton
   data-testid={`edit-button-${user.id}`}
   text={ES.common.edit}
   onClick={() => {
      handleEdit(user);
   }}
   ></EditButton>

Any idea?

As always, thank you!

Answer 1

When you send state in the route transition it isn't sent via props, but rather it's sent via the routing context. In the EditUser component you can access the sent route state via the location object returned from the useLocation hook.

Example:

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

...

const location = useLocation();
const { state } = location;
const { user } = state || {};