Как перенаправить на родительский маршрут, если страница не существует?

Question

Допустим, у меня есть следующие маршруты:

<Route
    path="/subpage/:slug"
    component={SubPageDetail}
    key="subpage-detail"
/>

<Route
    path="/subpage"
    component={SubPage}
    key="subpage"
/>

Для :slug у нас есть определенные страницы, которые соответствуют, например, /subpage/subpage-info1. Однако, если кто-то наберет тарабарщину, как в: /subpage/fhfjadsf33, который не существует, мы хотим перенаправить этого пользователя к непосредственному родителю, который /subpage (не домашняя страница или что-то еще).

Как нам этого добиться в реакции-роутере?

Answer 1

Все, что вам нужно сделать, это добавить этот маршрут

<Route component = { ComponentError } />

Конечно, вы должны создать ошибку ComponentError, чтобы показать ошибку вашей страницы или что угодно. Но, тем не менее, у вас возникнет проблема, так как ComponentError всегда будет отображаться на каждой странице, чтобы настроить ее, вы должны обернуть свои маршруты внутри тега-переключателя следующим образом.

import { Switch } from "react-router-dom"
...
...

<Switch>
<Route path="/subpage" component={SubPage} />
<Route component = { ComponentError } />
</Switch>

Конечно, я хотел бы уточнить, что он доступен на реакции Router V4. Надеюсь, это поможет.

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

Answer 2

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

Просто добавьте маршрут так:

<Route path='*' exact={true} component={MyDefaultComponent} />