如何使用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} />。