React Router - 在未通过 link 或 history.push 明确到达动态路由 URL 时获取未找到的页面

Question

我正在尝试解决我的应用程序中出现 "Page Not Found" / 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> 页面组件将成功显示搜索结果。它会有一个 URL 像：http://myurl.com/cafes/results/Los%20Angeles%2C%20CA%2C%20USA.

但是，如果我刷新页面，我会发现找不到页面。

根据我的理解，<NotFound> 组件应该捕获任何与其上方的路由不匹配的路由，但这种情况并没有发生。

它是 Wordpress 设置中的一个 React 应用程序运行，任何以 cafes 开头的 URL 都应该从 Wordpress 的设置中被抑制（尽管我对此不太了解）位，我没有设置它）。这个问题是否可能与 Wordpress 有关，或者我在我的 react-router 设置中搞砸了什么？

Answer 1

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

  devServer: {
    historyApiFallback: true,
  }

Answer 2

这不是客户端（React 或其他）问题。证明这一点的事实是，当您留在客户端时一切正常（因此：调用 .push API）但是一旦您重新加载，您就会进入服务器。

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

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

一个 NGINX 示例可以是：

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

我不确定 Wordpress 是否可以为您执行此操作（但我不确定这是否是个好主意）

React Router - 在未通过 link 或 history.push 明确到达动态路由 URL 时获取未找到的页面

React Router - Getting a page not found when not explicitly arriving at a dynamic route URL via a link or history.push

javascript

reactjs

wordpress

react-router

url-routing