Question

我正在尝试解决为什么我的应用程序中出现“找不到页面” / 404页面（？）的问题。

我的路由器设置如下：

<Router>
  <Search/>
  <Switch>
    <Route exact path="/cafes" component={ListView} />
    <Route
      path="/cafes/results/:loc"
      component={Results}
     />
     <Route component={NotFound} />
  </Switch>
</Router>

如果我使用<Search>组件，它将通过以下代码调用结果路由：

this.props.history.push({
      pathname: `/cafes/results/${searchAddress}`,
    });

，该<Results>页面组件将成功显示搜索结果。它将具有以下网址：http://myurl.com/cafes/results/Los%20Angeles%2C%20CA%2C%20USA。

但是，如果刷新页面，则找不到页面。

根据我的理解，<NotFound>组件应该捕获与上面的路由不匹配的任何路由，但是那没有发生。

这是一个在Wordpress设置中运行的React应用，应禁止从cafes开头的任何URL进入Wordpress的设置（尽管对此我不太了解，但我没有设置）。问题可能与Wordpress有关，还是我在React-Router设置中搞砸了？

Answer 1

这不是客户端（反应或其他）问题。事实证明，当您停留在客户端上时，所有组件都可以工作（因此：调用.push API），但是只要您重新加载，就可以进入服务器。

您必须将前端Web服务器配置为始终在/cafes下的每个位置发布页面。

通常通过使用Apache / NGINX配置来完成。

NGINX的示例可能是：

location / {
  root /path/to/your/build/directory
  try_files $uri $uri/ /index.html =404;
}

我不确定Wordpress是否可以为您做到这一点（但是我不确定这是否是一个好主意）

Answer 2

如果您使用的是webpack开发服务器，则将其添加到webpack配置中：

  devServer: {
    historyApiFallback: true,
  }

React Router-当未通过链接或历史记录显式到达动态路由URL时获得未找到的页面

2 个答案: