反应路由器重定向错误 404

Question

晚上好，我遇到的问题与 react 路由器有关。

这是我的 App.js，其中正在处理我的所有路由

const App = () => (

      <div className="App">
        <MediaQuery minWidth={700}>
  {(matches) => {

    if (matches) {
      return (<Router>
    <div>
      <Headroom>
      <Header />
      </Headroom>
      <main>
        <Route exact path='/' component={homepage} />
        <Route path='/home' component={homepage} />
        <Route path='/OurPubs' component={OurPubs} />
        <Route path='/OurEmail' component={OurEmail} />
        <Route path='/OurQuest' component={OurQuest} />
        <Route path='/StayRelevant' component={StayRelevant} />
        <Route path='/GetCurious' component={GetCurious} />
        <Route path='/TheGoods' component={TheGoods} />
        <Route path='/post/:slug' component={Post}>
<Redirect from="*" to="/" />
        </Route>

      </main>
    </div>
  </Router>

当我使用 GraphQL 获取数据并使用模板时（在某种意义上，每个 Post 都代表一个 Route）

<Route path='/post/:slug' component={Post}> 将用户带到不同的帖子。

现在，如果在移动设备上，删除缓存后，浏览器将显示错误 404 消息。这是正确的，毕竟 url post/XXXX 实际上并不存在于服务器上。

Not Found <br /> The requested URL /post/XXXX was not found on this server.

该问题仅在帖子内刷新或退出浏览器后在移动设备上出现。

问题是如何简单地将用户从未知路线带回 path="/"（家）？

Answer 1

当来自服务器的调用以获取具有 slug 的帖子在 Post 组件中解析时，您需要检查它是否为 404，如果是，则将用户导航到主页。

...
fetch('/post/abc-post').then((obj) => {
  // check if you have 404 error
  if (obj.statusCode === 404) {
    this.props.history.push('/');
  }
})
...

如果您向我提供有关Post 组件的更多信息，或者在哪里进行调用，我可以为您提供有信心的解决方案，但基本想法将如上所示。

Answer 2

TL;DR: 配置您的 HTTP 服务器以将所有请求重定向到 /index.html

---

这里的问题似乎是您的 HTTP 服务器 返回 404。这意味着当您访问 /index.html（React 代码所在的位置）时，应用程序已加载，并且作为用户与应用程序交互，URL 发生变化，无需使用 react-router 重新加载页面。

刷新时，您是在向 HTTP 服务器请求一个不是您的 React 应用程序的文件。因此，您应该配置您的 HTTP 服务器以将所有请求（如 /post/XXXX）重定向到 /index.html。

这个问题可能会有所帮助：https://serverfault.com/questions/188373/apache-2-2-rewrite-force-all-requests-to-index-html

Answer 3

一种快速的方式，您可以在您的 api 客户端中设置一个拦截器，例如 fetch api、superagent 等：

 if (!!response && response.status === 404) {
        store.dispatch(push("/404"));
    }