прореагируйте маршрутизатор 4 - как сделать путь root с вложенными маршрутами, но откат к не найден - PullRequest
Новая
       36

прореагируйте маршрутизатор 4 - как сделать путь root с вложенными маршрутами, но откат к не найден

2 голосов
/ 17 января 2020

Я только что нашел возможное приемлемое решение своей проблемы после нескольких часов борьбы с ним и даже начал писать этот пост, но я все еще хочу знать, есть ли лучший способ сделать то, что я хочу сделать.

Я хочу, чтобы основной компонент приложения был как можно более базовым c, чтобы обернуть все приложение. Затем я хочу иметь маршрут входа с некоторыми под-маршрутами, маршрут основного приложения со всеми маршрутами приложения и не найденную страницу. Идея состоит в том, что маршрут основного приложения (с этого момента именуемый Home) должен содержать макет приложения, и такой макет не должен повторно визуализироваться из одного суб-маршрута в другой.

Моя цель - настройка маршрута например: 


{
    path: "/",
    component: App,
    childRoutes: [
        {
            path: "login",
            childRoutes: [
                {
                    path: "",
                    name: "login"
                },
                {
                    path: "signup",
                    name: "Sign up"
                }
            ]
        },
        {
            path: "/",
            name: "Home",
            component: Layout,
            childRoutes: [
                {
                    path: "",
                    name: "Default page",
                },
                {
                    path: "stats",
                    name: "Statistics"
                }
            ]
        },
        {
            path: "*",
            name: "Page not found"
        }
    ]
}

Однако, поскольку к исходному маршруту не привязано точное соответствие, он никогда не позволит отобразить не найденную страницу. Это причина, по которой маршрут входа перед этим. Если я добавлю требование exact=true к домашнему пути, то ни один из под-маршрутов не будет соответствовать, что является еще более серьезной проблемой. Единственное решение, которое я нашел до сих пор (и я даже не знаю, насколько это хорошо), это переименовать путь '*' в 'not-found', поместить его перед маршрутом Home и добавить перенаправление в not -обнаружен как окончательный запасной вариант для каждой коллекции маршрутов.

Вот так выглядит каждый вложенный маршрут: 

    <Switch>
      {children}
      <Redirect to="/not-found" />
    </Switch>)

Важно отметить, что у меня более одного переключателя, что, вероятно, связано с моей проблемой маршрутизации. Это обзор того, как это выглядит при совпадении /stats:

router-structure

Я использую шаблонный набор, и маршруты генерируются из объектов и каждый дочерний маршрут имеет свой собственный переключатель.

...