React Router DOM v6

React Router 是一个用于构建 React 应用程序中导航的强大库。随着 v6 版本的发布，许多新特性和改进使得使用路由变得更加简单和直观。本教程将带您快速上手，了解如何在 React 应用中使用 React Router DOM v6。

1. 安装 React Router

首先，确保您已经创建了一个 React 应用。如果没有，可以使用 Create React App 创建一个：

bash
复制代码
npx create-react-app my-app
cd my-app

然后，安装 react-router-dom：

bash
复制代码
npm install react-router-dom

2. 创建基本的路由结构

在您的应用中，创建一个简单的路由结构。首先，打开 src 目录，并创建一个新的文件夹 pages。在该文件夹中，创建几个组件，例如 Home.js、About.js 和 NotFound.js。

jsx
复制代码
// src/pages/Home.js
import React from 'react';

const Home = () => {
  return <h1>首页</h1>;
};

export default Home;

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

const About = () => {
  return <h1>关于我们</h1>;
};

export default About;

// src/pages/NotFound.js
import React from 'react';

const NotFound = () => {
  return <h1>页面未找到</h1>;
};

export default NotFound;

3. 设置 Router

在 src 目录下打开 App.js，并配置路由：

jsx
复制代码
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import NotFound from './pages/NotFound';

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

export default App;

解释：

• BrowserRouter：用于包裹整个应用，使其支持路由。
• Routes：是 v6 中的一个新组件，替代了 Switch。
• Route：每个 Route 定义了一个路径及其对应的组件。path="*" 用于捕获未匹配的路径并显示 NotFound 组件。

4. 导航

为了在不同页面之间导航，您可以使用 Link 组件。在 App.js 中，添加导航链接：

jsx
复制代码
import { Link } from 'react-router-dom';

// 在 App 组件中添加导航
const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于我们</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

5. 嵌套路由

React Router v6 支持嵌套路由。您可以创建子路由。假设我们想要在 About 页面中添加一个子路由，例如 team。

首先，修改 About.js 文件：

jsx
复制代码
// src/pages/About.js
import React from 'react';
import { Link, Routes, Route } from 'react-router-dom';

const Team = () => {
  return <h2>团队介绍</h2>;
};

const About = () => {
  return (
    <div>
      <h1>关于我们</h1>
      <nav>
        <Link to="team">团队</Link>
      </nav>
      <Routes>
        <Route path="team" element={<Team />} />
      </Routes>
    </div>
  );
};

export default About;

6. 使用 URL 参数

React Router v6 还支持 URL 参数。您可以在路由中定义动态部分。例如，添加一个用户详情页：

在 src/pages 文件夹中创建 User.js：

jsx
复制代码
// src/pages/User.js
import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <h2>用户 ID: {id}</h2>;
};

export default User;

然后在 App.js 中添加路由：

jsx
复制代码
import User from './pages/User';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于我们</Link>
        <Link to="/user/1">用户 1</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<User />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

7. 总结

React Router DOM v6 简化了路由的使用，使得路由配置更加直观和灵活。您可以轻松地创建多层嵌套路由、动态参数以及简化的 API。通过以上步骤，您可以在自己的 React 应用中快速实现路由功能。