已解決：反應路由器 404 重定向

與 React Router 404 重定向相關的主要問題是它可能難以實現。 由於 React Router 沒有內置的 404 頁面，開發人員必須手動為 404 頁面創建路由，然後配置路由器以重定向任何與現有路由不匹配的請求。 這需要額外的代碼和配置，如果出現問題，這可能非常耗時且難以調試。 此外，如果用戶直接導航到不存在的 URL，他們仍然會看到錯誤頁面，而不是被重定向到 404 頁面。

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

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

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

// 第 5-7 行：這些行將 App 組件包裝在來自 react-router-dom 的 Router 組件中。

// 第 8-10 行：這些行分別為 Home 和 About 組件定義了兩條路由。

// 第 12 行：此行定義了一個路由，如果沒有其他路由匹配，則重定向到主頁。

什麼是 404 錯誤代碼

React Router 中的 404 錯誤代碼是一種 HTTP 狀態代碼，表示無法找到所請求的資源。 它通常在用戶試圖訪問不存在的頁面或路由時返回。 如果用戶輸入錯誤的 URL，或者如果頁面已被刪除或移動而沒有更新指向它的鏈接，就會發生這種情況。 發生這種情況時，React Router 將顯示一個通用的 404 頁面，其中包含一條適當的消息，通知用戶他們的錯誤。

404重定向

在 React Router 中，404 重定向是一種在用戶嘗試訪問無效 URL 時將用戶重定向到不同頁面的方法。 這有助於在用戶輸入錯誤的 URL 或嘗試訪問不存在的頁面時為他們提供更好的體驗。 404 重定向可以使用 React Router 的 Redirect 組件實現，它允許您指定要將用戶重定向到的頁面的路徑名。 例如，如果有人試圖訪問 /invalid-url，您可以像這樣使用重定向組件：