在React中如何處理嵌套路由和動態路由參數

在React中處理嵌套路由和動態路由參數通常需要使用React Router來管理路由。React Router是一個用于在React應用中處理路由的庫。下面是一個簡單的示例來演示如何處理嵌套路由和動態路由參數：

首先，需要安裝React Router：

npm install react-router-dom

接下來，創建一個包含嵌套路由和動態路由參數的組件：

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

const App = () => {
  return (
    <Router>
      <div>
        <h1>My App</h1>
        <ul>
          <li><Link to="/page1">Page 1</Link></li>
          <li><Link to="/page2">Page 2</Link></li>
        </ul>
        <Switch>
          <Route path="/page1" component={Page1} />
          <Route path="/page2" component={Page2} />
        </Switch>
      </div>
    </Router>
  );
};

const Page1 = () => {
  return (
    <div>
      <h2>Page 1</h2>
      <ul>
        <li><Link to="/page1/subpage1">Subpage 1</Link></li>
        <li><Link to="/page1/subpage2">Subpage 2</Link></li>
      </ul>
      <Switch>
        <Route path="/page1/subpage1" component={Subpage1} />
        <Route path="/page1/subpage2" component={Subpage2} />
      </Switch>
    </div>
  );
};

const Page2 = () => {
  return (
    <div>
      <h2>Page 2</h2>
    </div>
  );
};

const Subpage1 = () => {
  let { id } = useParams();

  return (
    <div>
      <h3>Subpage 1</h3>
      <p>Dynamic parameter: {id}</p>
    </div>
  );
};

const Subpage2 = () => {
  return (
    <div>
      <h3>Subpage 2</h3>
    </div>
  );
};

export default App;

在上面的示例中，我們創建了一個包含嵌套路由和動態路由參數的App組件。在App組件中，我們使用React Router的Route和Switch組件來定義路由和路由規則。在Page1組件中，我們創建了兩個子路由（Subpage 1和Subpage 2），并使用Link組件來導航到這些子路由。在Subpage1組件中，我們使用useParams鉤子來獲取動態路由參數。

通過這種方式，我們可以方便地處理嵌套路由和動態路由參數。React Router還提供了更多高級功能，如路由守衛和重定向等，可以根據實際需求進行使用。希望對你有幫助！