17 React Router 的基本使用

1. 简介

React Router 是 React 的一个标准库，用于处理前端路由。它使得在单页应用程序中实现路由变得更加简单和直观。通过 React Router，你可以为不同的 URL 显示不同的组件。

2. 安装

首先，你需要安装 React Router。通过 npm 来安装：

npm install react-router-dom

3. 基本概念

React Router 主要由以下几个核心部分组成：

• BrowserRouter：使用 HTML5 的 history API 来保持 UI 与 URL 同步。
• Routes：定义路由的容器，Route 是其中的一个子组件。
• Route：定义你的路由规则，将路径映射到组件。
• Link：用于创建导航链接，实现页面切换。

4. 创建一个简单的 Router 示例

下面是一个基本的 React Router 使用示例。

4.1 创建项目

你可以使用 Create React App 创建一个新的 React 项目：

npx create-react-app my-app
cd my-app

4.2 结构

在 src 目录下创建一个 components 目录，然后创建三个简单的组件：

// src/components/Home.jsx
import React from 'react';

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

export default Home;

// src/components/About.jsx
import React from 'react';

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

export default About;

// src/components/NotFound.jsx
import React from 'react';

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

export default NotFound;

4.3 添加 Router

在 src/index.js 中设置路由：

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Router>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="*" element={<NotFound />} />
        </Routes>
    </Router>
);

4.4 创建一个导航

在 src/App.js 中添加导航链接：

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

function App() {
    return (
        <div>
            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
            </nav>
            <hr />
            {/* 这里会根据路由展示对应的组件 */}
        </div>
    );
}

export default App;

5. 使用 Link 组件

通过 Link 组件，你可以创建导航链接，用户点击链接时会改变 URL 但不会刷新页面。例如，在上述 App 组件中，我们使用了两个 Link 组件来导航到不同的路由。

6. 路由中的参数

React Router 还支持路由参数。假设你想要在 About 页面中显示更多信息，比如用户 ID。

6.1 修改路由

<Route path="/about/:id" element={<About />} />

6.2 获取路由参数

在 About 组件中使用 useParams 获取参数：

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

const About = () => {
    let { id } = useParams();
    return <h2>About Page for user {id}</h2>;
};

通过这种方式，你可以在URL中传递动态参数。

7. 总结

React Router 是管理 React 应用路由的重要工具。通过理解 BrowserRouter、Routes 和 Route 组件，你可以创建强大而灵活的导航结构。此外，使用 Link 组件可以方便地实现页面间的导航。

关于更复杂的路由情况，比如嵌套路由、重定向等，可以进一步深入学习 React Router 的文档。