react-router-dom

react-router-dom是React的官方路由库，用于构建单页面应用程序（SPA）的导航和路由功能。它提供了一组用于管理应用程序路由的组件和钩子函数。

特点

• 简单易用：使用react-router-dom，您可以轻松地实现页面之间的导航和路由功能。
• 声明性路由：您可以使用声明性的方式配置路由，通过定义组件与URL之间的映射，实现页面间的无缝切换。
• 嵌套路由：react-router-dom支持嵌套路由，允许您在应用程序中创建复杂的页面结构。
• 动态路由：您可以定义动态路由，使路由能够根据特定的参数加载不同的内容。
• 路由守卫：react-router-dom提供了路由守卫的功能，可以通过预设的规则来控制对某些页面的访问权限。

安装

使用npm安装react-router-dom:

npm install react-router-dom

或者使用yarn安装:

yarn add react-router-dom

使用示例

以下示例演示了如何使用react-router-dom实现简单的路由导航功能：

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

const Home = () => <h2>Home</h2>
const About = () => <h2>About</h2>
const Contact = () => <h2>Contact</h2>

const 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>

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

export default App;

在上面的示例中，我们导入了一些所需的组件（BrowserRouter，Route，Link），然后在App组件中使用它们来创建导航和路由功能。

更多资源

• 官方文档
• 示例代码
• GitHub仓库