Страница React Router 404

В настоящее время я испытываю некоторые проблемы, связанные с отображением на маршрутизаторе 404 не найденных страниц. Это код, который у меня есть на данный момент:

 <Route path = "/home" component = {Home} exact = {true}/>
 <Route path = "/admin/forgot-password" component = {AdminResetPassword} exact = {true}/>
 <Authentication path = "/admin/welcome" component = {AdminWelcome} exact = {true}/>
 <Authentication path = "/admin/dashboard" component = {AdminDashboard} exact = {true}/>

Однако, если я попытаюсь сделать что-то вроде этого:

<Route path = "/home" component = {Home} exact = {true}/>
<Route path = "/admin/forgot-password" component = {AdminResetPassword} exact = {true}/>
<Route path = "*" component = {Page404}/>
<Authentication path = "/admin/welcome" component = {AdminWelcome} exact = {true}/>
<Authentication path = "/admin/dashboard" component = {AdminDashboard} exact = {true}/>

Дело в том, что это работает - но только для страниц, не завернутых в аутентификацию. Другими словами, если бы я попытался перейти на страницу администратора, он просто сказал бы, что страница 404 не найдена. Как мне это исправить?

Помощь будет очень признательна.

Это в <Switch />?

— 22.04.2018 23:26

Можете ли вы отметить это как правильное, если это помогло?

— 29.04.2018 14:15

reactjs react-router

22.04.2018 23:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 670

Ответы 1

Вы можете использовать <Switch />:

<Switch>
    <Route path = "/home" component = {Home} exact = {true}/>
    <Route path = "/admin/forgot-password" component = {AdminResetPassword} exact = {true}/>
    <Authentication path = "/admin/welcome" component = {AdminWelcome} exact = {true}/>
    <Authentication path = "/admin/dashboard" component = {AdminDashboard} exact = {true}/>
    <Route component = {Page404}/>
</Switch>

Если ни один из путей до последнего не соответствует, будет показан Page404.

22.04.2018 23:28