React Router V4 - Components not rendering under <Switch> - react-redux

Question

I'm trying to turn a block of hardcoded <Route />s into something that's dynamically generated from a config variable. Eg.
From
<Router>
<Switch>
<Route path="/" component={Home} exact />
<Route path="/about" component={About} />
<Route path="/documents" component={Documents} exact />
<Route path="/documents/faq" component={DocFAQ} />
<Route path="/documents/translations" component={Translations} />
</Switch>
</Router>
To
const routes = [
{
path: '/',
component: Home,
exact: true
},
{
path: '/about',
component: About
},
{
path: '/documents',
component: Documents,
children: [
{
path: '/faq',
component: DocFAQ
},
{
path: '/translations',
component: Translations
}
]
}
];
const RecursiveRoute = ({ route, parentPath = '' }) => {
const path = parentPath + route.path;
return (
<React.Fragment>
<Route path={path} exact={route.exact || (route.children != null)} component={route.component} />
{route.children && route.children.map((childRoute, i) => <RecursiveRoute key={i} route={childRoute} parentPath={path} />)}
</React.Fragment>
);
};
const Routes = () => (
<Router>
<Switch>
{routes.map((route, i) => <RecursiveRoute key={i} route={route} />)}
</Switch>
</Router>
);
This code generates exactly what I want when I take the mapping call outside of <Router>; eg. I can verify that it outputs the exact same code as the hardcoded block from before. When it's inside the <Switch> however, only the first route in the routes array is getting mapped--nothing else is generated. Putting logging statements inside <RecursiveRoute> confirms this.
Why is this and how do I fix it?
Another weird thing is that if I paste <RecursiveRoute>'s JSX right into the map statement, it works (except I can't make it recursive in this case):
<Switch>
{routes.map((route, i) => <Route key={i} path={route.path} exact={route.exact || (route.children != null)} component={route.component} />)}
</Switch>
But if I keep it outsourced to another component, the mapping fails again.
[Edit] Solution:
Based on mehamasum's answer, changing <RecursiveRoute> from a component to a function solved this problem:
function generateRecursiveRoute(route, parentPath = '') {
const path = parentPath + route.path;
const routeHasChildren = (route.children != null);
const baseHtml = <Route path={path} exact={route.exact || routeHasChildren} component={route.component} key={path} />;
return !routeHasChildren ?
baseHtml :
<React.Fragment key={path}>
{baseHtml}
{route.children.map((childRoute) => generateRecursiveRoute(childRoute, path))}
</React.Fragment>;
}
const Routes = () => (
<Router>
<Switch>
{routes.map((route) => generateRecursiveRoute(route))}
</Switch>
</Router>
);

Answer 1

Switch is implemented in such a way that you provide multiple Components as children and it will render the first Component's component with matching path. So if you provide something other than a Route as child (something that doesn't have those path and component props) you need to make sure you write your rendering logic in there. Because Switch doesn't know what to do here, as it sees no component or render prop associated with that child.
So when you were mapping to Routes directly they were working, but when you were mapping to RecursiveRoute it was failing. It had no path nor component on it, right?
I have updated your code a little bit so that the routes are directly rendered as children of Switch:
// refactor of RecursiveRoute to
// use it as an utility function, not as component
const getRecursiveRoute = route => {
if (route.children) {
const RootComponent = route.component;
return (
<Route
key={route.path}
path={route.path}
render={props => {
return (
<React.Fragment>
{/* render the root matching component*/}
<RootComponent {...props} />
{/* render the subroutes */}
{/* TODO: consider having a Switch here too */}
{route.children.map(route =>
getRecursiveRoute({
...route,
path: props.match.url + route.path
})
)}
</React.Fragment>
);
}}
/>
);
}
return (
<Route
key={route.path}
path={route.path}
exact={route.exact || route.children != null}
component={route.component}
/>
);
};
const Routes = () => {
return (
<Router>
<Switch>{routes.map(route => getRecursiveRoute(route))}</Switch>
</Router>
);
};
You might have to fix some edge cases about exact routing. Hope it helps.