React-Router 和 React-Router-DOM

React-Router 是一个基于 React 的强大路由库，可以方便地管理应用程序的路由部分。React-Router-DOM 是 React-Router 的 Web 版本，可以用于浏览器应用程序。

安装

使用 npm 安装 React-Router：

npm install react-router

或者使用 yarn：

yarn add react-router

同样地，使用 npm 或 yarn 安装 React-Router-DOM：

npm install react-router-dom

或者：

yarn add react-router-dom

使用

React-Router 的核心概念是 Route 。Route 是一个组件，用于描述在哪个 URL 下渲染哪个组件。例如，以下代码会在 URL 路径为 /about 时渲染 About 组件。

// App.js
import { Route } from 'react-router-dom';
import About from './About';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Route path="/about" component={About} />
    </div>
  );
}

React-Router 还提供了许多其他组件和 hooks，可以方便地管理 URL，如 Link 和 useHistory。以下是一个简单的示例，说明如何在组件中使用 Link 和 useHistory。

// Example.js
import { Link, useHistory } from 'react-router-dom';

function Example() {
  const history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <div>
      <h1>Example</h1>
      <Link to="/about">About</Link>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

在上面的示例中，我们使用了 Link 组件来创建一个链接，使用户可以点击链接来导航到该 URL。我们还使用了 useHistory hook，以编程方式导航到 URL。

总结

React-Router 和 React-Router-DOM 是 React 生态系统中不可缺少的组件库之一。使用 React-Router 可以方便地为 React 应用程序添加路由功能。在本文中，我们了解了 React-Router 的核心概念和几个重要的组件和 hooks。希望你已经掌握了如何使用 React-Router 来创建简单的路由应用程序。