Javascript React Router-当未通过链接或history.push显式到达动态路由URL时，获取未找到的页面

我正在尝试解决为什么在我的应用程序中找不到页面/404页面的问题

我的路由器设置如下：

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

该页面组件将成功显示搜索结果。它将有一个URL，如：http://myurl.com/cafes/results/Los%20Angeles%2C%20CA%2C%20USA.

但是，如果我刷新页面，我会得到一个找不到的页面

根据我的理解，组件应该捕获与上面的路径不匹配的任何路径，但这不会发生

---

这是一个在Wordpress设置中运行的react应用程序，任何以咖啡馆开头的URL都应该从Wordpress的设置中被禁止。虽然我对这一点不太了解，但我没有设置它。问题是否可能与Wordpress有关，或者我在react路由器设置中弄错了什么？

如果您使用的是webpack dev server，请将此添加到webpack config：

  devServer: {
    historyApiFallback: true,
  }

---

这不是客户端的反应或任何问题。这方面的一个证明是，当您停留在客户机上时，所有这些都可以工作，所以：调用.push API，但一旦重新加载，您就可以进入服务器

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

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

NGINX示例可以是：

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

---

我不确定Wordpress是否能为您做到这一点，但我不确定这是否是一个好主意

您从Wordpress或前端web服务器Apache或nginx获得的未找到页面？它似乎来自Wordpress为什么要向下投票？如果他使用的是webpack dev server，那么这个答案是正确的。

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