什么是 react-router-dom？

简介

react-router-dom 是一个基于 React 的用于处理页面路由的代码库。它是 react-router 的一个子集，主要面向浏览器端的路由操作。

搭建环境

如果你想要使用 react-router-dom，首先需要配置开发环境。使用以下命令安装相关的依赖：

npm install react-router-dom

使用

安装完依赖之后，可以在 React 组件中进行调用。以下是一个基本的页面路由示例：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Home = () => <h1>欢迎来到首页</h1>;
const About = () => <h1>欢迎来到关于我们</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于我们</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

这个示例中，我们定义了两个组件 Home 和 About，分别代表首页和关于我们页。在 App 组件中，我们通过 Router 组件包含了整个应用路由的范围，使用 Link 组件实现了路由跳转的链接，在 Switch 组件中，我们定义了两个 Route，分别匹配路径和组件，并指定了精确的路径匹配。

特性

• 在浏览器端进行路由操作，并且支持多种路由方式
• 提供了许多高级路由功能，如支持动态 url 参数，路由拦截、嵌套、异步加载等等。