9.2 构建React Router组件

在React应用中，路由管理是一个至关重要的部分，它决定了不同URL下应该渲染哪些组件。react-router-dom是React官方推荐的路由库，它提供了一套完整的路由解决方案，使得在React应用中实现单页面应用（SPA）的路由跳转变得简单而高效。本章节将深入介绍如何在React项目中安装、配置并使用react-router-dom来构建路由组件，以及处理一些常见的路由场景。

9.2.1 安装react-router-dom

首先，你需要在你的React项目中安装react-router-dom。打开终端，进入你的项目目录，然后运行以下npm或yarn命令来安装：

npm install react-router-dom
# 或者
yarn add react-router-dom

安装完成后，你就可以在你的项目中引入并使用react-router-dom提供的各种路由组件了。

9.2.2 基本路由配置

react-router-dom提供了<BrowserRouter>、<HashRouter>、<Link>、<NavLink>、<Route>等核心组件，用于构建和管理路由。其中，<BrowserRouter>和<HashRouter>是路由的容器组件，它们之间的主要区别在于URL的格式（#前缀或无前缀）。<Link>和<NavLink>用于在应用中创建导航链接，而<Route>则用于定义当URL匹配时应该渲染的组件。

示例：基本路由设置

以下是一个简单的路由配置示例，展示了如何使用<BrowserRouter>、<Route>和<Link>来构建基本的路由结构。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}
export default App;

注意：在React Router v6中，<Switch>组件已被<Routes>和<Route>的element属性替代，用于确保仅渲染一个匹配的路由。

9.2.3 嵌套路由与布局

在实际应用中，我们经常需要构建嵌套路由，即在一个路由组件内部再定义子路由。这通常用于构建具有多级导航的应用界面，如侧边栏导航或顶部导航下的子页面。

示例：嵌套路由

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import UserProfile from './UserProfile';
import UserPosts from './UserPosts';
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/user/profile">User Profile</Link>
            </li>
            <li>
              <Link to="/user/posts">User Posts</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user" element={<UserLayout />}>
            <Route index element={<UserProfile />} />
            <Route path="posts" element={<UserPosts />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}
function UserLayout({ children }) {
  return (
    <div>
      <h2>User Section</h2>
      {children}
    </div>
  );
}
export default App;

在上面的例子中，我们创建了一个UserLayout组件作为用户相关页面的布局容器，然后在<Route path="/user">下嵌套了两个子路由：UserProfile和UserPosts。注意，<Route index>用于指定当/user路径精确匹配时（即没有指定子路径时）渲染的组件。

9.2.4 编程式导航

除了使用<Link>和<NavLink>组件进行声明式导航外，react-router-dom还提供了编程式导航的API，允许你在JavaScript代码中直接控制路由的跳转。这通常用于在事件处理函数、异步操作完成后等场景中改变路由。

示例：使用useNavigate进行编程式导航

import React from 'react';
import { useNavigate } from 'react-router-dom';
function GoToHomeButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/');
  }
  return (
    <button type="button" onClick={handleClick}>
      Go to Home
    </button>
  );
}
export default GoToHomeButton;

在上面的例子中，我们使用了useNavigate钩子来获取一个navigate函数，该函数可以在需要时调用以改变当前路由。

9.2.5 路由守卫与权限控制

在构建企业级应用时，路由守卫和权限控制是必不可少的。react-router-dom虽然不直接提供路由守卫的功能，但你可以通过自定义的Route组件或高阶组件（HOC）来实现。

示例：简单的路由守卫

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
function PrivateRoute({ isAuthenticated, component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
}
// 使用示例
// 假设有一个isAuthenticated状态，用于判断用户是否已登录
<PrivateRoute isAuthenticated={isAuthenticated} path="/protected" component={ProtectedPage} />

在这个例子中，PrivateRoute是一个自定义的路由组件，它接收一个isAuthenticated属性来判断用户是否有权限访问该路由。如果用户未认证（isAuthenticated为false），则重定向到登录页面。

9.2.6 总结

通过本章节的学习，你应该已经掌握了如何在React项目中安装、配置和使用react-router-dom来构建路由组件。我们介绍了基本路由配置、嵌套路由、编程式导航以及路由守卫等关键概念，并提供了相应的代码示例。这些知识和技能将帮助你构建出结构清晰、易于维护的React单页面应用。记住，路由管理是前端开发中不可或缺的一部分，深入理解并熟练掌握它将对你的项目大有裨益。