如何在 React 路由中設定 404 頁面？

---

建立 404 頁面對於任何網站來說都是必不可少的，用於處理 URL 不存在或可能已修改的情況。要在 React 中設定 404 頁面，我們將建立一個元件，以便在發生 404 錯誤時顯示。以下是如何使用 react-router-dom 在 React 中設定 PageNotFound 元件。

先決條件

• NPM & Node.js
• React
• React Router

在 React 路由中設定 404 頁面的方法

新增 404 頁面對於改善使用者體驗至關重要，因為它可以在使用者遇到損壞或不正確的 URL 時為他們提供指導。如果您正在學習 React，我們的 ReactJS 課程包含有關設定自定義錯誤頁面的實用課程，幫助您的應用程式平滑地處理導航錯誤。

在 React 路由中設定 404 頁面的步驟

• 建立 PageNotFound 元件 - 此元件將顯示 404 錯誤訊息。
• 將元件匯入 App.js 或設定路由的位置。
• 在 404 路由之前定義其他頁面路由。
• 對於最後一個路由，使用 * 作為 URL 路徑來捕獲任何不匹配的路由並渲染 404 頁面。

建立 React 應用程式並安裝所需的模組

步驟 1：建立 React 應用程式

使用以下命令設定新的 React 專案。

npx create-react-app TutorialPoints404Error

步驟 2：導航到專案資料夾

移動到專案目錄。

cd TutorialPoints404Error

步驟 3：安裝 react-router-dom

安裝 react-router-dom 以在您的 React 應用程式中啟用路由。

npm install react-router-dom

專案結構

您的專案將具有類似於此的基本結構。

示例 package.json 依賴項

設定完成後，您的 package.json 檔案應反映這些依賴項。

"dependencies": {
  "@testing-library/jest-dom": "^6.1.3",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^15.6.0",
  "react": "^18.3.0",
  "react-dom": "^18.3.0",
  "react-router-dom": "^6.15.0",
  "react-scripts": "^6.0.0",
  "web-vitals": "^3.4.0"
}

實現示例

以下是如何在 React Router（版本 6）中實現 404 頁面的示例。

App.js

// Filename - App.js

import React from "react";
import {
  Route,
  Routes,
  BrowserRouter as Router,
} from "react-router-dom";
import Home from "./Home";
import PageNotFound from "./404ErrorPage";

function App() {
  return (
    <Router>
      {/* Header section for app branding */}
      <header style={{ textAlign: "center", padding: "1rem", backgroundColor: "#f0f0f0" }}>
      <h1 style={{ color: "green" }}>
        Hello, Tutorial Points
      </h1>
      <h3>
        This is a React Example for Adding a 404 Page in Routing
      </h3>
      </header>
      {/* Main Home route */}
      <Routes>
        <Route exact path="/" element={} />
      {/* Wildcard route for 404 Page */} 
        <Route
          path="*"
          element={<PageNotFound />}
        />
      </Routes>
    </Router>
  );
}

export default App;

Home.js

// Filename - Home.js
import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};

export default Home;

404ErrorPage.js

// Filename - 404ErrorPage.js
import React from "react";

const PageNotFound = () => {
  return (
    <div>
      <h1>404 Error</h1>
      <h1>Page Not Found</h1>
    </div>
  );
};

export default PageNotFound;

執行應用程式

要啟動您的 React 應用程式，請使用以下命令。

npm start

測試 404 頁面

應用程式啟動後，開啟瀏覽器並導航到 https://:3000 以檢視主頁。如果您輸入無效的 URL，例如 https://:3000/invalid，則應顯示 404 頁面，並顯示錯誤訊息。

• 在 - https://:3000 上
  
  
• 在 - https://:3000/invalid 上
  
  

此設定確保為任何與現有路徑不匹配的路由顯示 404 頁面，從而提供流暢的使用者體驗。