React Router的用法。

React Router 是 React 官方的路由库，用于实现单页面应用（SPA）的路由功能，目前常用的版本是 React Router v6。以下将详细介绍 React Router v6 的基本用法：

1. 安装

首先，确保你已经创建了一个 React 项目。然后使用以下命令安装 React Router v6：

npm install react-router-dom

2. 基本使用流程

2.1 引入必要的组件

在项目中使用 React Router 时，需要引入一些核心组件，如 BrowserRouter、Routes 和 Route。

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

• BrowserRouter：它使用 HTML5 的历史 API（pushState、replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。
• Routes：用于包裹多个 Route 组件，它会根据当前 URL 匹配并渲染第一个匹配的 Route。
• Route：定义了路径和要渲染的组件之间的映射关系。

2.2 配置路由

在应用的根组件中配置路由。以下是一个简单的示例：

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

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

export default App;

在上述代码中，path 属性指定了 URL 路径，element 属性指定了当路径匹配时要渲染的组件。

2.3 创建页面组件

创建 Home 和 About 组件，例如：

// Home.js
import React from 'react';

const Home = () => {
    return <h1>这是主页</h1>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return <h1>这是关于页面</h1>;
};

export default About;

3. 路由导航

3.1 使用 Link 组件

Link 组件用于在应用内进行导航，它会渲染一个可点击的链接，点击后会更新 URL 并渲染相应的组件。

import { Link } from 'react-router-dom';

const Navigation = () => {
    return (
        <nav>
            <ul>
                <li><Link to="/">主页</Link></li>
                <li><Link to="/about">关于</Link></li>
            </ul>
        </nav>
    );
};

export default Navigation;

将 Navigation 组件添加到 App 组件中：

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

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

export default App;

3.2 使用 useNavigate 钩子

在函数组件中，可以使用 useNavigate 钩子进行编程式导航。例如，在点击按钮时进行导航：

import { useNavigate } from 'react-router-dom';

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

    const handleClick = () => {
        navigate('/about');
    };

    return (
        <button onClick={handleClick}>前往关于页面</button>
    );
};

export default MyButton;

4. 嵌套路由

在实际应用中，可能会有嵌套的路由结构。例如，一个博客页面可能有文章列表和文章详情两个子页面。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import Blog from './Blog';
import BlogList from './BlogList';
import BlogDetail from './BlogDetail';

const Blog = () => {
    return (
        <div>
            <h1>博客页面</h1>
            <Outlet /> {/* 用于渲染子路由的内容 */}
        </div>
    );
};

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/blog" element={<Blog />}>
                    <Route index element={<BlogList />} /> {/* 默认子路由 */}
                    <Route path=":id" element={<BlogDetail />} /> {/* 动态路由，:id 是参数 */}
                </Route>
            </Routes>
        </Router>
    );
};

export default App;

在上述代码中，Outlet 组件用于渲染子路由的内容，index 属性指定了默认子路由，path=":id" 是动态路由，:id 是一个参数，可以在 BlogDetail 组件中通过 useParams 钩子获取。

5. 获取路由参数

在动态路由中，可以使用 useParams 钩子获取路由参数。例如，在 BlogDetail 组件中获取文章的 ID：

import { useParams } from 'react-router-dom';

const BlogDetail = () => {
    const { id } = useParams();

    return (
        <div>
            <h2>文章详情 - ID: {id}</h2>
        </div>
    );
};

export default BlogDetail;

通过以上步骤，你可以基本掌握 React Router v6 的使用方法，实现单页面应用的路由功能。