如何使用 React Router v4 将不正确的路由重定向到特定页面答案

【问题标题】：How to redirect incorrect routes to a specific page with React Router v4如何使用 React Router v4 将不正确的路由重定向到特定页面
【发布时间】：2018-07-01 05:07:27
【问题描述】：

我正在尝试将特定路由重定向到我的 404 页面。但是，有两种情况我无法成功重定向。

当用户转到一条路线并在其后添加/ 时（例如/home/ 而不是/home）。这会正确重定向，但是由于某种原因，所有 CSS 都会丢失。
当用户转到受保护的路由并在其后添加/ 时。这会导致引用错误（例如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>

【问题讨论】：

根据您的问题，丢失的 CSS 部分需要您提供更多说明/信息（您是否使用任何前/后处理器/模块？）。您未找到的页面配置正在使用重定向，这似乎是不必要的。您可以轻松使用普通的 Switch-Route 步进器。检查这个 - reacttraining.com/react-router/core/api/Switch
嗨@ShobhitChittora，你能澄清一下你所说的前/后处理器/模块是什么意思吗？我不熟悉这些术语。至于重定向，是的，我最初使用了您的 Switch-Route 示例，但希望路径也显示为 /page-not-found。无论选择哪一种，我仍然会遇到同样的两个问题。

标签： reactjs react-router

【解决方案1】：

能够通过这两个添加解决路由问题：

将我的 CSS 链接从 href="css/style.css" 更改为 href="/css/style.css"。
在我的路线中添加了exact（例如，<Route exact path="/home" component={Home} />。

【讨论】：