Я пытаюсь заставить мое приложение использовать вложенные маршрутизаторы React для навигации по моему приложению, но мне не удается выполнить следующее: у меня есть маршрутизатор для переключения между страницей входа и домашней страницей и маршрутизатор на домашней странице для переключения между содержание тела
Вернитесь на страницу входа, нажав кнопку «Выйти». Если я нажимаю кнопку выхода из системы, URL переходит в / login, но не отображает нужный компонент. После обновления страницы отображается нужный компонент.
При вводе прямой страницы в URL, например. localhost: 3000 / около, страница ничего не загружает
Моя желаемая функциональность следующая:
При загрузке localhost: 3000 / - Если пользователь вошел в систему, он загружает компонент «О программе», иначе, если пользователь вышел из системы, он перенаправляется в / login
При загрузке localhost: 3000 / contact - если пользователь вошел в систему, он загружает домашнюю страницу и переключает содержимое тела, чтобы отобразить компонент контакта, если пользователь вышел из системы, он перенаправляется на страницу входа, но при входе в систему переводит пользователя в компонент контакта.
При нажатии кнопки «Выход» происходит возврат к компоненту входа.
Я добавил исходный код здесь: https://codesandbox.io/embed/loving-engelbart-x3ns3
Первый маршрутизатор находится в App / App.jsx, а маршрутизатор содержимого тела находится в _pages / HomePage.jsx
К сожалению, мне пришлось удалить аутентификацию при входе в систему, чтобы она не работала, но, возможно, есть проблема с моим кодом, которую можно обрисовать в общих чертах.