reactjs – 使用react-router-4的路由组

我的反应应用程序有3个重叠路径的入口点,并且很难维护.其中2个应用程序基本上只停留在旧网站的几个位置,直到主应用程序具有足够的功能来完全替换主站点.

我正在使用React路由器4,并有一个包含所有路由的routes.tsx文件.但我想按功能对路由进行分组,然后让每个应用程序的路由组件只需要它需要的东西.

目前我的路线看起来像这样：

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>
    );
};

但我希望它看起来像这样：

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>
    );
};

但这导致Caroutes不能正确路由.我尝试过使用Div’s,但这也不起作用.

在React 16中,您可以使用 Fragments完成此操作：

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

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

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