# BrowserRouter、Routes、Route 介绍

URL: https://caijiao.org/react/chapter8/basic-components
Source: docs/react/chapter8/basic-components.md
Description: BrowserRouter、Routes 和 Route 是 React Router 中用于管理路由的核心组件。BrowserRouter 用于将路由与浏览器的历史记录管理结合，Routes 用于包裹多个路由配置，Route 用于定义路径和组件的映射关系。理解这三个组件的作用对于正确实现路由系统至关重要。

## BrowserRouter

`BrowserRouter` 是 React Router 提供的一个组件，它使用 HTML5 的 History API 来管理 URL 路径。它应该包裹整个应用，并允许您的 React 应用使用路由。

```jsx
import { BrowserRouter } from 'react-router-dom';

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

`BrowserRouter` 使得路由能够根据浏览器的地址栏进行导航，并且支持浏览器的前进、后退功能。

## Routes

`Routes` 组件是 React Router v6 引入的，它用于包裹一个或多个 `Route` 组件，并在应用中管理这些路由的匹配。`Routes` 组件必须是 `BrowserRouter` 组件的子组件。

```jsx
import { Routes, Route } from 'react-router-dom';

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

在 React Router v6 版本中，`Routes` 替代了之前的 `Switch` 组件，并且其作用是根据当前的路径来选择渲染哪个 `Route`。

## Route

`Route` 是 React Router 中最常用的组件，它用于定义一个 URL 路径与一个 React 组件的映射关系。每当浏览器的 URL 匹配该路径时，`Route` 会渲染相应的组件。

```jsx
import { Route } from 'react-router-dom';

} />
} />
```

在 React Router v6 中，`Route` 组件不再使用 `component` 或 `render` 属性来指定渲染的组件，而是使用 `element` 属性，直接传入 JSX 元素。

## 总结

* `BrowserRouter` 是应用程序的路由容器，负责与浏览器的历史记录进行交互。
* `Routes` 是用于包裹多个 `Route` 的容器，确保路由能够正确匹配并渲染。
* `Route` 用于定义路径与组件的对应关系，在 URL 匹配时渲染相应的组件。

这三个组件是 React Router 路由管理的基础，能够帮助您在 React 应用中实现高效、动态的路由系统。