Организация маршрутов реагирования на отдельные компоненты

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

Flipping <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> в AllRoutes позволяет показывать только первый удар, как <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

Похоже, что текущая установка для обработки компонентов, таких как классы ООП, которые вы можете расширить, является неправильным подходом.Вместо этого я использовал массивы, так как они могут обрабатываться оператором распространения.Он по-прежнему выполняет ту же задачу организации маршрутов по бесконечному количеству групп, как и я.

Создайте массив для каждой группы

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для обеспечения понимания этой проблемы.

Answer 2

Как насчет того, чтобы иметь его без Swtich на верхнем уровне

  <Route component={PublicRouteGroup} />
  <Route component={AuthRouteGroup} />      

, чтобы они отображались безоговорочно.И затем наличие дополнительных Switch в ваших компонентах, таких как

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

Но почему id не работает?

Причина в том, что как Switch работает :

React.Children.forEach(this.props.children, child => {
  if (match == null && React.isValidElement(child)) {
    element = child;
    const path = child.props.path || child.props.from;

    match = path
      ? matchPath(location.pathname, { ...child.props, path })
      : context.match;
  }
});

Видите, даже если AuthRouteGroup не является Route, Switch все равно смотрит на его props.path.И как только undefined для props.path соответствует любому пути , а Switch отображает только первое совпадение Route вы получаете только первый обработанный компонент.

[UPD] "не делаетПредставление -match-any-route будет работать только на верхнем уровне Switch.Также нет способа узнать, соответствует ли какой-либо вложенный дочерний элемент элемента-брата текущему маршруту или нет.Таким образом, единственный способ увидеть все маршруты в одном месте.

Альтернатива, которая выглядит довольно скудно, имеет специальный маршрут "/ error404" и перенаправляет пользователя на него из других компонентов (но кто должен решать? И где? И когда?).