React 中的動(dòng)態(tài)路由

React 中的

動(dòng)態(tài)路由 是指在應(yīng)用程式中建立依賴資料或使用者互動(dòng)的路由的能力，從而允許路由動(dòng)態(tài)變更。這使得可以根據(jù)使用者輸入、API 回應(yīng)或動(dòng)態(tài) URL 參數(shù)呈現(xiàn)不同的視圖。

在建立無(wú)法預(yù)先定義路由的應(yīng)用程式時(shí)，例如當(dāng)頁(yè)面內(nèi)容取決於從 API 取得的資料或某些路由取決於應(yīng)用程式的狀態(tài)或操作時(shí)，動(dòng)態(tài)路由特別有用。

---

動(dòng)態(tài)路由在 React 中如何運(yùn)作

React Router 是在 React 應(yīng)用程式中實(shí)現(xiàn)路由的首選函式庫(kù)。它允許路由路徑和組件根據(jù)資料或條件進(jìn)行更改，從而使動(dòng)態(tài)路由變得簡(jiǎn)單。

---

動(dòng)態(tài)路由的關(guān)鍵概念

1. 動(dòng)態(tài)路由參數(shù):

   • 動(dòng)態(tài)路由參數(shù)可讓您使用動(dòng)態(tài)填充的佔(zhàn)位符來(lái)定義路由。這些參數(shù)可以在 URL 中傳遞，例如 /user/:userId，其中 :userId 是 URL 的動(dòng)態(tài)部分。

2. 程式化導(dǎo)航：

   • 您可以使用 React Router 的 useNavigate 鉤子或 根據(jù)應(yīng)用程式中的邏輯或操作導(dǎo)航到不同的路線。組件。

3. 條件路由:

   • 動(dòng)態(tài)路由也可以是有條件的，這取決於應(yīng)用程式的狀態(tài)，例如使用者是否登入或某些資料是否可用。

4. 延遲載入路線:

   • 透過(guò)動(dòng)態(tài)路由，可以根據(jù)需要延遲載入路由，僅在需要時(shí)載入元件，從而提高應(yīng)用程式的效能。

---

React 中的動(dòng)態(tài)路由範(fàn)例

在此範(fàn)例中，我們將示範(fàn)如何使用動(dòng)態(tài)參數(shù)建立路由並根據(jù) URL 有條件地渲染它們。

逐步範(fàn)例：

1. 帶參數(shù)的基本動(dòng)態(tài)路由：
   • 在路由路徑中使用 :parameter 來(lái)表示將在運(yùn)行時(shí)填入的動(dòng)態(tài)值。

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;

說(shuō)明：

• UserProfile 元件使用 useParams 從 URL 擷取 userId 參數(shù)。
• 按一下連結(jié)會(huì)動(dòng)態(tài)導(dǎo)覽至 /user/1 或 /user/2，頁(yè)面將呈現(xiàn)對(duì)應(yīng)的使用者設(shè)定檔。

---

1. 使用 useNavigate Hook 進(jìn)行程式路由：
   • useNavigate 用於元件內(nèi)的動(dòng)態(tài)路由。您可以使用它根據(jù)使用者操作或其他條件以程式設(shè)計(jì)方式導(dǎo)航到不同的路線。

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;

說(shuō)明：

• 在 Home 元件中，我們使用 useNavigate 在點(diǎn)擊按鈕時(shí)動(dòng)態(tài)導(dǎo)航到不同的使用者設(shè)定檔。
• UserProfile 元件使用 useParams 從 URL 接收 userId 並渲染對(duì)應(yīng)的設(shè)定檔。

---

1. 條件動(dòng)態(tài)路由：
   • 您可以根據(jù)某些條件有條件地渲染路由，例如使用者身份驗(yàn)證或資料可用性。

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;

說(shuō)明：

• PrivateRoute 元件是一個(gè)高階元件，用來(lái)檢查使用者是否經(jīng)過(guò)驗(yàn)證。如果用戶未通過(guò)身份驗(yàn)證，他們將被重新導(dǎo)向到登入頁(yè)面。
• 儀表板路由僅在 isAuthenticated 狀態(tài)為 true 時(shí)才可存取。

---

1. 延遲載入路由（程式碼分割）：
   • 您可以使用 React.lazy 和 Suspense 在需要時(shí)動(dòng)態(tài)載入路由及其元件，從而提高應(yīng)用程式的效能。

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;

說(shuō)明：

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

---

動(dòng)態(tài)路由的好處

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

---

結(jié)論

React 中的動(dòng)態(tài)路由允許更靈活和互動(dòng)的應(yīng)用程式。透過(guò)使用動(dòng)態(tài)路由參數(shù)、編程序?qū)Ш健l件路由和延遲加載，您可以創(chuàng)建功能強(qiáng)大的 React 應(yīng)用程序，這些應(yīng)用程式可以根據(jù)用戶互動(dòng)或應(yīng)用程式狀態(tài)進(jìn)行調(diào)整。 React Router 是一個(gè)強(qiáng)大的工具，可輕鬆在 React 中實(shí)現(xiàn)動(dòng)態(tài)路由，讓您輕鬆建立複雜且可擴(kuò)展的應(yīng)用程式。

---

以上是掌握 React 中的動(dòng)態(tài)路由：建立靈活且可擴(kuò)展的應(yīng)用程式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！