已解決：找不到反應路由器重新加載頁面

與 React Router reload page not found 相關的主要問題是，當用戶刷新頁面時，瀏覽器將嘗試向服務器請求當前 URL。 但是由於React Router是客戶端路由，URL沒有對應的服務端路由，所以會返回404 Not Found錯誤。 如果用戶希望某些內容出現在刷新時，這可能會特別成問題。

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// 第 1 行：此行從 react-router-dom 庫中導入 BrowserRouter、Route 和 Switch 組件。

// 第 3 行：這一行定義了一個名為 App 的函數，它返回 JSX 代碼。

// 第 5 行：這一行將整個 JSX 代碼包裝在 react-router-dom 的 Router 組件中。

// 第 6 行：此行將所有路由包裝在來自 react-router-dom 的 Switch 組件中。

// Lines 7 – 9: 這些行分別為'/'和'/about'定義了兩條路由及其各自的組件（Home和About）。

// Lines 11 – 12: 這些行定義了一個路由，當沒有其他路由匹配時，它會呈現一個 h1 標籤，上面寫著“Page not found”。

找不到頁面錯誤

React Router 中的頁面未找到錯誤是當用戶嘗試訪問不存在的頁面或路由時發生的錯誤。 如果用戶輸入錯誤的 URL，或者如果他們試圖訪問的頁面已被刪除或移動，就會發生這種情況。 在 React Router 中，這個錯誤是通過使用 組件的 render prop 並傳入一個返回 404 頁面的函數。 這允許開發人員創建包含他們想要的任何內容的自定義 404 頁面，例如有用的鏈接或道歉消息。

我如何處理在反應路由器中找不到頁面

使用 React Router 時，您可以通過創建自定義路由來處理未找到的頁面，該路由將在 URL 與任何現有路由不匹配時呈現 NotFound 組件。 為此，您需要創建一個路徑設置為“*”的新路由並渲染您的 NotFound 組件。

例如：

} />

這將匹配任何尚未與現有路由匹配的 URL，並呈現您的 NotFound 組件。

如何強制重新加載反應頁面

在 React Router 中，您可以通過對歷史對象使用 replace 方法來強制重新加載頁面。 這將用新條目替換歷史堆棧中的當前條目，從而強制重新加載頁面。 要使用此方法，您需要首先訪問歷史對象。 您可以通過在創建路由器組件時將其作為道具傳遞來做到這一點：

const AppRouter = () => (

{/* 你的路線在這裡 */}

);

一旦你訪問了歷史對象，你就可以像這樣使用它的 replace 方法：

history.replace('/some-route');

相關文章：

發表評論