React Router 基础组件一览

在 React Router 中有三种类型的组件：路由器组件，路由匹配组件，导航组件。这些组件都来自于 <code>react-router-dom</code>。

对于每一个 React Router 应用来说，都应该有一个路由器组件，它们会为应用创建一个专用的 <code>history</code> 对象。针对 Web 项目，<code>react-router-dom</code> 提供了 <code>&lt;BrowserRouter&gt;</code> 和 <code>&lt;HashRouter&gt;</code>。

React Router 提供了两种路由匹配组件：<code>&lt;Route&gt;</code> 和 <code>&lt;Switch&gt;</code>。

路由匹配是通过比较 <code>&lt;Route&gt;</code> 组件的 <code>path</code> 属性和当前地址的 pathname 实现的，如果匹配则渲染当前路由组件的内容，如果不匹配则渲染 null。注意：没有提供 <code>path</code> 属性的 <code>&lt;Route&gt;</code> 组件将总是匹配。

<code>&lt;Switch&gt;</code> 组件用于给 <code>&lt;Route&gt;</code> 组件分组，可以将一组 <code>&lt;Route&gt;</code> 组件嵌套在 <code>&lt;Switch&gt;</code> 组件中。

那么，<code>&lt;Switch&gt;</code> 组件仅是为了给 <code>&lt;Route&gt;</code> 组件分组而诞生的吗？我们知道 <code>&lt;Route&gt;</code> 组件通过比较它的 <code>path</code> 属性和当前地址来判断是否渲染它的内容，所以就会存在多个 <code>&lt;Route&gt;</code> 匹配成功且都渲染它们内容的情况。为了避免这样的情况，<code>&lt;Switch&gt;</code> 组件就起了作用，它会迭代当中的 <code>&lt;Route&gt;</code> 组件，并选出第一个匹配的 <code>&lt;Route&gt;</code> 来渲染。

React Router 提供了 <code>&lt;Link&gt;</code> 组件用于为应用提供链接，当渲染 <code>&lt;Link&gt;</code> 组件的时候，会在应用中渲染为 HTML 的 <code>&lt;a&gt;</code> 标签。

另外还有一个特殊的 <code>&lt;Link&gt;</code> 组件就是 <code>&lt;NavLink&gt;</code>，如果当前的地址与它的属性相匹配，它就会使用 "active" 样式。

任何时候如果您想要强制一个导航，就可以使用 <code>&lt;Redirect&gt;</code> 组件，当它被渲染的时候，就会导航到它的属性。