使用react-router-4的路由组

Question

我的react应用程序有3个具有重叠路由的入口点，它变得越来越难以维护。其中两个应用程序基本上只是停留在传统站点上的几个地方，直到主应用程序具有足够的功能来完全取代主站点。

我正在使用React router 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代替，这也不起作用。

Answer 1

您可以将其存储在单独的文件中，然后将它们映射到主文件中

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>

Answer 2

当我试图用react-router-5解决类似的问题时，我发现了这个问题。片段对我不起作用，实际上，当我深入研究Switch组件实现时，我明白了其中的原因。Fragment仍然是一个react组件，但Switch只希望路由作为子组件。

在我的情况下，我可以使用一种变通方法。

1. I使用function component返回路由数组。
2. I将function component作为function而不是react component调用。

如果有必要，在CustomerAppRoutes和CarAppRoutes中拥有道具是没有问题的。

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 3

我目前使用的解决方案是创建路由数组：

//routes.tsx
import * as React from 'react';

export interface IRoute { path: string, component: React.ComponentClass, exact?: boolean }

const CarRoutes: IRoute[] = [
   { path: '/cars', component: {CarDisplayPage} },
   { path: '/cars/:id', component: {CarDisplayPage} },
];

const CustomerRoutes: IRoute[] = [
    { path: '/customers', component: {CustomerDisplayPage} },
    { path: '/customers/:id', component: {CustomerDisplayPage} },
];

const AppRouting: React.SFC = (): JSX.Element =>
{
    const routes = []
        .concat(CarRoutes)
        .concat(CustomerRoutes);
    return (
        <Switch>
            <Route exact path='/' component={HomePage} />
            {routes.map(r => <Route path={r.path} exact={r.exact===true} path={r.path} key={r.path} />)}
        </Switch>
    );
};