Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 216
SchoolJava101 Avatar asked Sep 06 '20 14:09

SchoolJava101


People also ask

How do you pass state in react router v6?

With react-router, you pass state or data from one component to another component to use the react-router Link component. Data pass more quickly in the new version of react-router (v6). For example, you can pass an object's data into one component to another component.

How do I use location in react v6?

To find the matched route in react-router v6 you need to use the matchPath function. You will need to store all your routes in a variable like an array. Then you can loop through all routes and use that function to find the matched route.

How do I listen to route changes in react v6 router?

Use your router and pass your history object to it. In a component you want to listen to location changes on, import your history object and invoke the listen callback as you did previously. import history from '../myHistory'; ...


2 Answers

You can do it with outlet context https://reactrouter.com/docs/en/v6/hooks/use-outlet-context

like image 118
Serhey Avatar answered Oct 22 '22 23:10

Serhey


This is now possible (from version 6.1.0) with the context prop

<Outlet context={}/>

github issue

react router outlet docs

like image 9
Ar26 Avatar answered Oct 22 '22 22:10

Ar26