第 2 步：創(chuàng)建單獨的組件

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>關于.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

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

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

使用 React Router v6 進行動態(tài)路由

為了處理動態(tài)路由，例如用戶 ID 是 URL 一部分的用戶個人資料頁面，React Router v6 提供了 useParams 鉤子。

第 1 步：定義動態(tài)路線

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

說明：

• :userId 是路由路徑中的動態(tài)段。 useParams 鉤子允許您訪問 UserProfile 組件中 userId 的值。
• 當您導航到 /user/123 時，UserProfile 組件將渲染并顯示 userId 為 123。

React Router v6 中的嵌套路由

嵌套路由允許您通過在父路由中定義子路由來構建復雜的布局。

第 1 步：定義父子路由

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

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

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

export default App;

說明：

• 儀表板組件包含用于概述和設置的嵌套路由。
• 父路由中的 /* 確保所有子路由都在 /dashboard 下處理。

React Router v6 Hooks

React Router v6 引入了幾個用于導航和訪問路由信息的鉤子：

1. useNavigate：以編程方式導航到不同的路線。
2. useParams：訪問動態(tài) URL 參數(shù)。
3. useLocation：獲取有關當前位置（URL）的信息。
4. useMatch：將當前 URL 與給定路由匹配。
5. useResolvedPath：將路徑解析為絕對 URL。

示例：使用Navigate Hook

useNavigate 掛鉤允許在您的應用程序中進行編程導航。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

React Router v6 最佳實踐

• 默認精確匹配：React Router v6 默認精確匹配路由，無需指定精確即可更輕松地處理路由匹配。
• 使用 element Prop：將 JSX 直接傳遞給 element prop，而不是使用組件 prop，從而簡化代碼并減少對渲染函數(shù)的需求。
• 嵌套路由：使用嵌套路由通過子路由構建復雜的頁面布局，保持代碼模塊化和可維護性。
• 使用通配符路由處理 404：使用通配符 * 捕獲所有不匹配的路由并顯示 404 頁面或將用戶重定向到默認路由。

結論

React Router v6 相對于之前的版本引入了多項改進，包括更簡單的 API、更好的路由匹配以及對動態(tài)和嵌套路由的增強支持。通過利用 useNavigate、useParams 和 useLocation 等鉤子，您可以在 React 應用程序中構建強大且靈活的路由系統(tǒng)。