Как перенаправить неверные маршруты на определенную страницу с помощью React Router v4

Question

Я пытаюсь перенаправить определенные маршруты на мою страницу 404. Однако есть два случая, когда я не могу перенаправить успешно.

1. Когда пользователь идет к маршруту и ​​добавляет / после него (например, /home/ вместо /home). Это перенаправляет правильно, однако, все CSS по какой-то причине потеряны.
2. Когда пользователь идет по защищенному маршруту и ​​добавляет / после него. Это вызывает ошибку задания (например, ReferenceError: $ is not defined).

Вот так настроены мои маршруты:

<Switch>
  <Route exact path="/" component={Home} />
  <ProtectedRoute path="/protected-route" component={ProtectedRoute} />
  <Route path="/page-not-found" component={PageNotFound} />
  <Redirect from="*" to="/page-not-found" />
</Switch>

Answer 1

удалось исправить проблемы с маршрутизацией с помощью этих двух дополнений:

1. Изменена моя CSS-ссылка с href="css/style.css" на href="/css/style.css".
2. Добавлено exact в мои маршруты (например, <Route exact path="/home" component={Home} />.