Impoving react-router-config

I have 2 features to propose:

1. Do not force users to use renderRoutes inside components. Instead of that renderRoutes can be something like this:

<route.component {...props} {...extraProps} route={route}>
    {renderRoutes(route.routes)}
</route.component>

Minus one dependency in component. 2. Render routes by itself if no component was passed

{route.component && (
    <route.component {...props} {...extraProps} route={route}>
        {renderRoutes(route.routes)}
    </route.component>
)}
{!route.component && (
     {renderRoutes(route.routes)}
)}

That will help if I configure router not in one file.

const routes = [{
    path: '/',
    component: App,
    routes: [{
        path: '/bar',
        routes: require('./bar)
      }, {
        path: '/baz',
        routes: require('./baz')
    }]
}];

Files bar.js and baz.js export some routes structure.

[timdorr]

Ah, I see what you are saying. The main issue is related to the refactor I mentioned. We’re basically just wrapping a <Switch> at the moment and I would like to refactor to wrap matchRoutes instead, allowing us to traverse the entire tree and back out of subtrees as well. This is all related to a big refactor of renderRoutes.

[dimitriirybakov]

1. Of course you need call renderRoutes once in root of your app like this.

ReactDOM.render((
  <BrowserRouter>
    {renderRoutes(routes)}
  </BrowserRouter>
), document.getElementById('root'))

But why do I need to use it in other components? Why can’t renderRoute render it by itself and pass rendered children to my component?