如何使用React Router實現動態路由和嵌套路由

要使用React Router實現動態路由和嵌套路由，首先需要安裝React Router庫。可以通過以下命令安裝React Router：

npm install react-router-dom

接下來，在應用程序的根組件中引入React Router，并配置路由。以下是一個示例：

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

import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Post from './components/Post';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/post/:id" component={Post} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的示例中，我們定義了四個路由：主頁（Home）、關于頁面（About）、聯系頁面（Contact）和帖子頁面（Post）。帖子頁面使用動態路由，其中:id表示動態參數。

在Post組件中，我們可以通過props.match.params.id來獲取動態參數的值。以下是一個簡單的示例：

import React from 'react;

const Post = (props) => {
  const postId = props.match.params.id;

  return (
    <div>
      <h1>Post {postId}</h1>
      <p>This is the content of post {postId}</p>
    </div>
  );
};

export default Post;

要實現嵌套路由，我們可以在組件內部定義子路由，如下所示：

import React from 'react';
import { Route } from 'react-router-dom';

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      <Route path="/about/history" render={() => <p>Our history</p>} />
      <Route path="/about/team" render={() => <p>Our team</p>} />
      <Route path="/about/location" render={() => <p>Our location</p>} />
    </div>
  );
};

export default About;

在上面的示例中，我們在About組件中定義了三個子路由：history、team和location。當訪問/about/history時，將顯示“Our history”文本，以此類推。

通過以上步驟，您可以使用React Router實現動態路由和嵌套路由。希望對您有所幫助！