React-router: v6 beta, cant pass props through Outlet.

Created on 9 Jul 2020  路  3Comments  路  Source: ReactTraining/react-router

My current project's previous team had used a lot of cloneElement to pass props to nested routes.

{Children.map(children, (child) =>
          cloneElement(child, {
            somefunc: this.somefunc,
          })
        )}

So I got a tons of code to refactor now, and I do not see a way to migrate this code to v6. Do you consider way to allow pass props like <Outlet myProp=1/>, to pass it into underlying route's component?

I'll give you an example to be sure

//index.js
<Route path='/' component={<App />} />
   <Route path /1' component={<1 />} />
   <Route path /2' component={<2 />} />
</Route>

//App.js
render() {
 return <Outlet myprop='1' />
}

//1/2.js
this.prop.myprop === 1 // true


All 3 comments

No, because you can pass them via URL parameters.

Can we reconsider this ? There is certain props I _do not_ want to pass via URL parameters

You can pass them to the element in <Route />

<Route path='/' component={<App />} />
   <Route path /1' component={<Comp1 baz="blub" />} />
   <Route path /2' component={<Comp2 foo="bar" />} />
</Route>
Was this page helpful?
0 / 5 - 0 ratings