掌握 React 中的動態路由：建立靈活且可擴展的應用程式

React 中的動態路由

React 中的

動態路由 是指在應用程式中建立依賴資料或使用者互動的路由的能力，從而允許路由動態變更。這使得可以根據使用者輸入、API 回應或動態 URL 參數呈現不同的視圖。

在建立無法預先定義路由的應用程式時，例如當頁面內容取決於從 API 取得的資料或某些路由取決於應用程式的狀態或操作時，動態路由特別有用。

---

動態路由在 React 中如何運作

React Router 是在 React 應用程式中實現路由的首選函式庫。它允許路由路徑和組件根據資料或條件進行更改，從而使動態路由變得簡單。

---

動態路由的關鍵概念

1. 動態路由參數:

   • 動態路由參數可讓您使用動態填充的佔位符來定義路由。這些參數可以在 URL 中傳遞，例如 /user/:userId，其中 :userId 是 URL 的動態部分。

2. 程式化導航：

   • 您可以使用 React Router 的 useNavigate 鉤子或 根據應用程式中的邏輯或操作導航到不同的路線。組件。

3. 條件路由:

   • 動態路由也可以是有條件的，這取決於應用程式的狀態，例如使用者是否登入或某些資料是否可用。

4. 延遲載入路線:

   • 透過動態路由，可以根據需要延遲載入路由，僅在需要時載入元件，從而提高應用程式的效能。

---

React 中的動態路由範例

在此範例中，我們將示範如何使用動態參數建立路由並根據 URL 有條件地渲染它們。

逐步範例：

1. 帶參數的基本動態路由：
   • 在路由路徑中使用 :parameter 來表示將在運行時填入的動態值。

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Access dynamic parameter from the URL
  return <h2>User Profile for user: {userId}</h2>;
};

const App = () => {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/user/1">User 1</Link></li>
          <li><Link to="/user/2">User 2</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} /> {/* Dynamic route */}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• UserProfile 元件使用 useParams 從 URL 擷取 userId 參數。
• 按一下連結會動態導覽至 /user/1 或 /user/2，頁面將呈現對應的使用者設定檔。

---

1. 使用 useNavigate Hook 進行程式路由：
   • useNavigate 用於元件內的動態路由。您可以使用它根據使用者操作或其他條件以程式設計方式導航到不同的路線。

import React from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const goToUserProfile = (id) => {
    navigate(`/user/${id}`);
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2</button>
    </div>
  );
};

const UserProfile = ({ userId }) => {
  return <h2>User Profile for user: {userId}</h2>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• 在 Home 元件中，我們使用 useNavigate 在點擊按鈕時動態導航到不同的使用者設定檔。
• UserProfile 元件使用 useParams 從 URL 接收 userId 並渲染對應的設定檔。

---

1. 條件動態路由：
   • 您可以根據某些條件有條件地渲染路由，例如使用者身份驗證或資料可用性。

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

const PrivateRoute = ({ isAuthenticated, children }) => {
  return isAuthenticated ? children : <Navigate to="/login" />;
};

const Dashboard = () => <h2>Dashboard - Only accessible when logged in</h2>;
const Login = () => <h2>Login Page</h2>;

const App = () => {
  const isAuthenticated = false;  // Change this value to test

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={
            <PrivateRoute isAuthenticated={isAuthenticated}>
              <Dashboard />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

說明：

• PrivateRoute 元件是一個高階元件，用來檢查使用者是否經過驗證。如果用戶未通過身份驗證，他們將被重新導向到登入頁面。
• 儀表板路由僅在 isAuthenticated 狀態為 true 時才可存取。

---

1. 延遲載入路由（程式碼分割）：
   • 您可以使用 React.lazy 和 Suspense 在需要時動態載入路由及其元件，從而提高應用程式的效能。

import React, { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./Home'));
const Dashboard = React.lazy(() => import('./Dashboard'));

const App = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default App;

說明：

• Home 和 Dashboard 元件使用 React.lazy 進行延遲加載，這表示它們僅在存取路由時才會加載。
• 元件載入時，後備 UI (
  Loading...
  ;) 向使用者顯示。

---

動態路由的好處

• 效能：透過動態和延遲載入的路由，您只載入必要的元件，從而提高效能。
• 靈活性：動態路由可以靈活地處理各種類型的使用者驅動的導航，例如登入狀態、基於角色的存取或 API 驅動的路由。
• 可擴展性：隨著應用程式的成長，動態路由有助於管理複雜的路由邏輯，特別是對於大規模 SPA 或具有複雜用戶流的應用程式。

---

結論

React 中的動態路由允許更靈活和互動的應用程式。透過使用動態路由參數、編程序導航、條件路由和延遲加載，您可以創建功能強大的 React 應用程序，這些應用程式可以根據用戶互動或應用程式狀態進行調整。 React Router 是一個強大的工具，可輕鬆在 React 中實現動態路由，讓您輕鬆建立複雜且可擴展的應用程式。

---

以上是掌握 React 中的動態路由：建立靈活且可擴展的應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！