Question

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

这是我正在处理所有路线的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}> 将用户带到不同的帖子。

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

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

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

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

Answer 1

当来自服务器的呼叫获取slug Post组件中的... fetch('/post/abc-post').then((obj) => { // check if you have 404 error if (obj.statusCode === 404) { this.props.history.push('/'); } }) ...解析的帖子时，您需要检查它是否为404，如果是，那么您将导航用户到家页。

Post

如果您向我提供有关template <typename T> struct template_adapter_t {}; template <int N> struct foo_adapter_t { template <typename T> static foo_t<T, N> adapt(T const&); }; template <int N> template_adapter_t< foo_adapter_t<N> > foo(); template <typename Range, typename Adapter> auto operator|( Range const& range, template_adapter_t<Adapter>(*)()) -> decltype(Adapter::adapt(range)) { return Adapter::adapt(range); }组件的更多信息，或者拨打电话的地方，我可以给您自信的解决方案，但基本想法就像上面一样。

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等，如下所示：

$ data=( $(echo $string | grep -o -E '[0-9]+') ) 
$ echo "${data[-1]}"
20

错误404上的React Router重定向

3 个答案: