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>頁面組件將成功顯示搜索結果。 它將具有 URL ，例如： http://myurl.com/cafes/results/Los%20Angeles%2C%20CA%2C%20USA 。

但是，如果我刷新頁面，我會得到一個找不到頁面。

<NotFound>組件，據我了解，應該捕獲與其上方不匹配的任何路線，但這並沒有發生。

它是一個在 Wordpress 設置中運行的反應應用程序，任何以cafes開頭的 URL 都應該從 Wordpress 的設置中抑制（盡管我不太了解那一點，我沒有設置它）。 問題是否可能與 Wordpress 有關，或者我在 react-router 設置中搞砸了什么？

Answer 1

這不是客戶端（React 或其他）問題。 證明這一點的事實是，當您停留在客戶端時，一切正常（因此：調用.push API），但只要您重新加載 go 到服務器。

您必須配置您的前端 web 服務器以始終在/cafes 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,
  }