# 安装 React Router

URL: https://caijiao.org/react/chapter8/installation
Source: docs/react/chapter8/installation.md
Description: React Router 是 React 官方推荐的路由库，它提供了声明式的方式来处理应用程序中的路由。通过 React Router，您可以在不同的 URL 地址之间进行导航，更新浏览器的历史记录，并根据当前的 URL 渲染不同的组件。

## 安装步骤

React Router 是一个第三方库，因此首先需要通过 npm 或 yarn 安装它。在项目根目录下运行以下命令进行安装：

```bash
npm install react-router-dom
````

或者，如果您使用 yarn，则可以运行：

```bash
yarn add react-router-dom
```

## 配置 React Router

安装完成后，您可以在 React 项目中使用 React Router 来进行页面导航。以下是 React Router 的基本配置步骤：

### 步骤 1：导入 React Router 组件

React Router 提供了多个重要组件，最常用的是 `BrowserRouter`、`Route` 和 `Link`。

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

### 步骤 2：配置 Router 和 Route

接下来，您需要使用 `Router` 组件来包裹整个应用程序，然后使用 `Route` 组件来定义不同路径下渲染的组件。

```jsx
function App() {
  return (
    
  );
}

function Home() {
  return <h2>首页</h2>;
}

function About() {
  return <h2>关于</h2>;
}
```

在上面的代码中，`<Router>` 组件包裹了应用程序，`<Route>` 用于定义路由路径和相应的组件，而 `Link` 组件用于进行页面导航。

### 步骤 3：启动应用

完成配置后，您可以启动应用并访问不同的 URL 路径，React Router 会根据路径渲染对应的组件。

```bash
npm start
```

## 总结

通过以上步骤，您已经成功安装并配置了 React Router。在 React 应用中，React Router 让页面导航变得更加简洁和灵活，能够轻松处理不同的路由场景。