9.2构建react-router组件-React全家桶--前端开发与实例(下)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(下)

### 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命令来安装：

```bash
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>`来构建基本的路由结构。

```jsx
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 嵌套路由与布局

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

##### 示例：嵌套路由

```jsx
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`进行编程式导航

```jsx
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）来实现。

##### 示例：简单的路由守卫

```jsx
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单页面应用。记住，路由管理是前端开发中不可或缺的一部分，深入理解并熟练掌握它将对你的项目大有裨益。

该分类下的相关小册推荐：

ReactJS面试指南

深入学习React实战进阶

剑指Reactjs

React全家桶--前端开发与实例(上)

React 进阶实践指南