React Router-通过链接或history.push未明确到达动态路由URL时，找不到页面。]

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应用程序，对于该应用程序，应从Wordpress的设置中禁止任何以cafes开头的URL（尽管对此我不太了解，但我没有对其进行设置）。问题可能与Wordpress有关，还是我在React-Router设置中搞砸了？

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

Answer 1

这可能不是客户端（反应或其他）问题。您必须将前端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,
  }