javascriptreactjsreact-router

Pass Props to Outlet in React Router v6

I can't manage to pass props to my Outlet components in the new react-router v6. I tried the straightforward solution:

render() {
  return (
    <Outlet name="My name" />
  );
}

And that correctly renders the child component, however no props are passed to the child. None of the examples provided by the React team (or anyone else for that matter) display Outlets with props, so I'm worried it's not actually a thing. Is there another way I'm not finding or am I using Output components incorrectly?

Edit: Seems there's no straightforward way to pass props, see answer below.

Solution

  • You can do it with outlet context