将 React 路由组织成单独的组件

Question

我正在尝试找到一种方法来组织我的路线，以帮助将来可能接管我工作的开发人员。我想将我的<Route />条目分成单独的组件，然后将它们加载到主组件中，类似于用户分配组的方式。

问题是，当使用多个组件时，只有第一个组件有效。这可能不是最反应的方式，所以我也愿意接受替代方案。

原路线安排

const AllRoutes = () => {
    return (
        <Switch>
            {/* public routes*/}
            <Route path={'/about'} component={AboutView} />
            <Route path={'/project'} component={ProjectView} />
            <Route path={'/contact'} component={ContactView} />
            
            {/* auth routes */}
            <Route path={'/login'} component={LoginView} />
            <Route path={'/logout'} component={LogoutView} />

            <Route component={Error404View} />
        </Switch>
    )
}

将公共路由与授权路由分开：

const PublicRouteGroup = () => {
    return (
        <>
            <Route path={'/about'} component={AboutView} />
            <Route path={'/project'} component={ProjectView} />
            <Route path={'/contact'} component={ContactView} />
        </>
    )
}

const AuthRouteGroup = () => {
    return (
        <>
            <Route path={'/login'} component={LoginView} />
            <Route path={'/logout'} component={LogoutView} />
        </>
    )
}

这样我就可以这样使用它：

const AllRoutes = () => {
    return (
        <Switch>
            <PublicRouteGroup />    {/* This works */}
            <AuthRouteGroup />      {/* This doesn't */}


            {/* This 404 is not a route group */}
            <Route component={Error404View} />
        </Switch>
    )
}

翻转<PublicRouteGroup />并且<AuthRouteGroup />只改变顺序：

const AllRoutes = () => {
    return (
        <Switch>
            <AuthRouteGroup />      {/* This works */}
            <PublicRouteGroup />    {/* This doesn't */}

            {/* This 404 is not a route group */}
            <Route component={Error404View} />
        </Switch>
    )
}

更新#1

这要感谢@skyboyer。通过将 移动<Switch>到子组件并将其从AllRoutes组件中删除，每个组件都开始显示。看起来添加<Switch>inAllRoutes只允许第一个命中显示哪个是一样的<Switch>。但现在通过删除它，它也会在每个页面的末尾显示 404。

基本上，它看起来像这样：

const AllRoutes = () => {
    return (
        <>
            <Route component={AuthRouteGroup} />      {/* This works */}
            <Route component={PublicRouteGroup} />    {/* This also works */}

            {/* This 404 is not a route group */}
            <Route component={Error404View} />        {/* Always shown at the bottom */}
            {/* Even putting the 404 in its own RouteGroup yields the same issue */}
        </>
    )
}

Answer 1

看来当前处理组件（例如可以从中扩展的 OOP 类）的方法是错误的。相反，我使用了数组，因为这些可以由扩展运算符执行。它仍然实现了相同的目标，即在无数组中组织路线，这正是我所追求的。

为每个组创建数组

const public_route_group = [
    {path: '/about', component: AboutView},
    {path: '/project', component: ProjectView},
    {path: '/contact', component: ContactView},
]

const auth_route_group = [
    {path: '/login', component: LoginView},
    {path: '/logout', component: LogoutView},
]

const error_route_group = [
    {component: Error404View}   // No path required
]

const user_routes = [
    ...public_route_group,
    ...auth_route_group,
    ...error_route_group
]

创建路线

const AllRoutes = () => {
    return (
        <Switch>
            {user_routes.map((route, idx) => {
                return <Route key={idx} {...route} />
            })}
        </Switch>
    )
}

我认为如果您在数组中使用嵌套对象，也可以进一步修改它。

我要感谢@skyboyer 提供了对此问题的见解。