Impoving react-router-config

[dimitriirybakov]

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]

1. I'm not sure what you're asking there, but I believe you're looking for matchRoutes or something like that. I'd like to refactor renderRoutes to make use of matchRoutes, so this will likely be covered by that change.

2. Is basically the same as react-router-config does not match on later paths even if there is an exact path match later #5429. We should back out of the subtree when traversing the routes.

[dimitriirybakov]

1. No. That I'm asking is not using reactRouter it route component. Example:

const routes = [{
    component: Root,
    routes: [{
        path: '/child1',
        component: Child1
    }, {
        path: '/child2',
        component: Child2
    }]
}];

const Root = ({route}) => (
  <div>
    <h1>Root</h1>
    {renderRoutes(route.routes)}
  </div>
);

const Child1 = () => (
    <div>
        <h2>Child1</h2>
    </div>
);

const Child2 = () => (
    <div>
        <h2>Child2</h2>
    </div>
);

Instead of that I want something like this:

const routes = [{
    component: Root,
    routes: [{
        path: '/child1',
        component: Child1
    }, {
        path: '/child2',
        component: Child2
    }]
}];

const Root = ({children}) => (
  <div>
    <h1>Root</h1>
    {children}
  </div>
);

const Child1 = () => (
    <div>
        <h2>Child1</h2>
    </div>
);

const Child2 = () => (
    <div>
        <h2>Child</h2>
    </div>
);

2. How's that connected?

[dimitriirybakov]

#5429 describes route without path, but with component. I want oposite of that.

[timdorr]

1. In your example, there's nothing connecting a plain array to the rendering of a component. There's no way for us to get involved there.

2. It's related because it talks about backing out of a subtree to match on another subtree. To fix that, we need to be able to back out of the recursion. Once we can do that, we can back all the way out to the root and render a "404" component when nothing matches.

[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?

[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.