路由基本用法

在现代单页应用（SPA）中，路由是一个核心概念。它允许我们在不刷新页面的情况下，根据 URL 的变化加载不同的组件，从而实现页面导航。React 本身并不提供路由功能，但我们可以使用 react-router-dom 库来实现路由管理。

什么是 React 路由？

React 路由是一个用于管理 React 应用中页面导航的库。它允许我们根据 URL 的变化动态加载不同的组件，从而实现单页应用的效果。通过 React 路由，我们可以创建多页面应用的用户体验，而无需实际加载多个 HTML 文件。

安装 react-router-dom

在开始使用 React 路由之前，我们需要先安装 react-router-dom 库。你可以通过以下命令来安装它：

bash
npm install react-router-dom

基本路由配置

1. 创建路由组件

首先，我们需要创建一些组件，这些组件将根据路由的不同而被加载。例如，我们可以创建 Home、About 和 Contact 三个组件：

jsx
// Home.js
function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

// About.js
function About() {
  return <h1>About Us</h1>;
}

// Contact.js
function Contact() {
  return <h1>Contact Us</h1>;
}

2. 配置路由

接下来，我们需要在应用的入口文件中配置路由。通常，我们会在 App.js 文件中进行配置。我们可以使用 BrowserRouter、Routes 和 Route 组件来实现路由管理：

jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在上面的代码中，我们使用 BrowserRouter 包裹了整个应用，并在 Routes 组件中定义了三个路由。每个路由都通过 path 属性指定了 URL 路径，并通过 element 属性指定了要加载的组件。

3. 导航链接

为了在页面中实现导航，我们可以使用 Link 组件来创建链接。例如，我们可以在 Home 组件中添加导航链接：

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

function Home() {
  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
      <nav>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
    </div>
  );
}

Link 组件的 to 属性指定了目标路由的路径。当用户点击这些链接时，页面将导航到相应的路由，而不会刷新页面。

动态路由

除了静态路由，React 路由还支持动态路由。动态路由允许我们根据 URL 中的参数来加载不同的内容。例如，我们可以创建一个动态路由来显示用户的个人资料：

jsx
// UserProfile.js
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { username } = useParams();
  return <h1>Profile of {username}</h1>;
}

在路由配置中，我们可以使用 :username 来定义动态参数：

jsx
<Route path="/user/:username" element={<UserProfile />} />

当用户访问 /user/john 时，UserProfile 组件将加载，并且 useParams 钩子将返回 { username: 'john' }。

嵌套路由

React 路由还支持嵌套路由，允许我们在一个路由中嵌套其他路由。例如，我们可以在 About 页面中嵌套一个 Team 页面：

jsx
// Team.js
function Team() {
  return <h2>Our Team</h2>;
}

在路由配置中，我们可以使用嵌套的 Route 组件来实现嵌套路由：

jsx
<Route path="/about" element={<About />}>
  <Route path="team" element={<Team />} />
</Route>

在 About 组件中，我们需要使用 Outlet 组件来渲染嵌套路由的内容：

jsx
import { Outlet } from 'react-router-dom';

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <Outlet />
    </div>
  );
}

当用户访问 /about/team 时，Team 组件将被渲染在 About 组件中的 Outlet 位置。

实际应用场景

假设我们正在开发一个博客应用，我们可以使用 React 路由来实现以下功能：

首页：显示所有博客文章的列表。
文章详情页：根据文章的 ID 显示具体的文章内容。
用户个人资料页：根据用户名显示用户的个人资料。

通过使用 React 路由，我们可以轻松地实现这些功能，并提供一个流畅的用户体验。

总结

React 路由是构建单页应用的核心工具之一。通过 react-router-dom 库，我们可以轻松地实现页面导航、动态路由和嵌套路由。掌握这些基本用法后，你可以进一步探索更高级的路由功能，如路由守卫、懒加载等。

附加资源

练习

创建一个包含 Home、About 和 Contact 页面的 React 应用，并使用 react-router-dom 实现路由导航。
尝试创建一个动态路由，根据用户 ID 显示不同的用户信息。
在 About 页面中嵌套一个 Team 页面，并实现嵌套路由。

通过完成这些练习，你将更好地理解 React 路由的基本用法，并能够在实际项目中应用这些知识。

什么是 React 路由？​

安装 react-router-dom​

基本路由配置​

1. 创建路由组件​

2. 配置路由​

3. 导航链接​

动态路由​

嵌套路由​

实际应用场景​

总结​

附加资源​

练习​