Прежде всего,
- Я НОВИНКА для JS и React (через 3 месяца после начала обучения JS).
- Используется React Router v4 (из-за ограничений курса)
- Redux и React Hooks не использовались (я их еще не изучал)
Если пользователь обновляет окно, оно остается на том же адресе - Я думаю, что это технически так же, как при добавлении ключевых слов (маршрута) в адресную строку и клавиши pu sh enter - (если вы не используете redirect или что-либо изменяет маршрут), что имеет преимущества в определенных ситуациях ; однако, минусом может быть мой случай ( не уверен, правда ли это на самом деле ... пожалуйста, дайте мне знать, если я ошибаюсь ).
- Я хочу достичь трех целей,
1a. путь маршрута соответствует состоянию keyword, исходное состояние которого равно cats и совпадает с пользовательским вводом, когда пользователь отправляет входное значение
2a. когда пользователь обновляет окно, оно возвращается в исходное состояние componentDidMount (перенаправление на /cats)
3a. когда пользователь вводит несуществующий адрес, компонент ошибки 404 отображается
- проблема, с которой мне приходится добиваться, состоит в следующем:
1b. Если я использую Redirect для достижения "2a", а затем, если я набираю несуществующие маршруты (например, "/ catsasldkja"), он не показывает компонент ошибки 404 и перенаправляет на /cats
2b. Если я использую Switch компонент для достижения "3a", он отдает 404 компонента ошибки, как и ожидалось; однако он остается по тому же адресу, поэтому, когда пользователь находится по адресу /cats и обновляет окно, он работает хорошо, но когда пользователь находится на других маршрутах (адресах), таких как /dogs или /brandon, он отображает компонент ошибки 404: PageNotFound.js, потому что состояние keyword откатывается до исходного состояния, которое составляет cats, но, например, путь все еще находится в /brandon, а состояние keyword не соответствует пути маршрута, /cats, поэтому он отображает 404 компонента
Как я могу решить эту проблему?
Вот мой Git Репо и Live Link
Огромное спасибо за потраченное время!