时间戳

首页 > 解决方案 > React Router - 未通过链接或 history.push 显式到达动态路由 URL 时未找到页面

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>

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

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

并且该<Results>页面组件将成功显示搜索结果。它将有一个类似的 URL：http://myurl.com/cafes/results/Los%20Angeles%2C%20CA%2C%20USA。

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

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

它是一个在 Wordpress 设置中运行的反应应用程序，任何以它开头的 URLcafes都应该从 Wordpress 的设置中被禁止（虽然我不太了解那一点，但我没有设置它）。这个问题是否可能与 Wordpress 有关，或者我在我的 react-router 设置中搞砸了？

标签： javascriptreactjswordpressreact-routerurl-routing

解决方案

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

您必须将前端 Web 服务器配置为始终在/cafes.

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

NGINX 示例可能是：

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

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

推荐阅读