groups of routes with react-router-4

Question

My react app has 3 entry points with overlapping routes, and it is getting hard to maintain. 2 of the apps are basically just stuck in a couple places on the legacy site, until the main app has enough functionality to fully replace the main site.

I am using React router 4, and have a routes.tsx file with all my routes. But I would like to group the routes by function, and then have the routes component for each app just take what it needs.

Currently my routes look like this:

const MainAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route exact path='/' component={HomePage} />
            <Route path='/customers' component={CustomersDisplayPage} />
            <Route path='/customers/:id' component={CustomersDisplayPage} />
            <Route path='/cars' component={CarDisplayPage} />
            <Route path='/cars/:id' component={CarDisplayPage} />
        </Switch>
    );
};

But I would like it to look like this:

const MainAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route exact path='/' component={HomePage} />
            <CustomerAppRoutes />
            <CarAppRoutes />
        </Switch>
    );

const CustomerAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route path='/customers' component={CustomersDisplayPage} />
            <Route path='/customers/:id' component={CustomersDisplayPage} />
        </Switch>
    );
};

const CarAppRoutes: React.SFC = (): JSX.Element =>
{
    return (
        <Switch>
            <Route path='/cars' component={CarDisplayPage} />
            <Route path='/cars/:id' component={CarDisplayPage} />
        </Switch>
    );
};

But this causes Caroutes not to route properly. I have tried using Div's instead, and that does not work either.

Answer 1

I found this question when I try to solve similar problem with react-router-5. Fragments didn't work for me and actually when I look inside Switch component implementation I understand why. Fragment is still a react component but Switch expect only Routes as children.

In my case I can use a workaround.

1. I use function component to return Route array.

2. I call function component as function and not as react component.

There are no problems to have props in CustomerAppRoutes and CarAppRoutes if it is necessary.

const MainAppRoutes = () => (
    <Switch>
        <Route exact path='/' component={HomePage} />
        {CustomerAppRoutes()}
        {CarAppRoutes()}
    </Switch>
);

const CustomerAppRoutes = () => ([
    <Route path='/customers' component={CustomersDisplayPage} />,
    <Route path='/customers/:id' component={CustomersDisplayPage} />
]);

const CarAppRoutes = () => ([
    <Route path='/cars' component={CarDisplayPage} />,
    <Route path='/cars/:id' component={CarDisplayPage} />
]);

Answer 2

You could barrel it in separate files and then map them in the main file

CustomerRoutes.js

import ...
export default [
    { path: '/customers', component: CustomersDisplayPage },
    { path: '/customers/:id', component: CustomersDisplayPage }
]

CarAppRoutes.js

import ...
export default [
    { path: '/cars', component: CarDisplayPage },
    { path: '/cars/:id', component: CarDisplayPage }
]

MainRoutes.js

import ...
import CarAppRoutes from 'wherever';
import CustomerRoutes from 'wherever';

...
<Switch>
    <Route exact path='/' component={HomePage} />
    { CustomerRoutes.map(props => <Route {...props} />) }
    { CarAppRoutes.map(props => <Route {...props} />) }
</Switch>