2020-03-12

React Router教程

React项目的可用的路由库是 React-Router ,当然这也是官方支持的。它也分为：

• react-router 核心组件
• react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
• react-router-native 应用于native端的路由

以下教程我们都以Web端为主，所以所有的教程内容都是默认关于 react-router-dom 的介绍。

进行网站（将会运行在浏览器环境中）构建，我们应当安装 react-router-dom。react-router-dom 暴露出 react-router 中暴露的对象与方法，因此你只需要安装并引用 react-router-dom 即可。

官方文档地址： https://reacttraining.com/react-router/web/guides/philosophy

Installation | 安装

安装：

yarn add react-router-dom
# 或者，不使用 yarn
npm install react-router-dom

路由的基本概念

现在的React Router版本中已不需要路由配置，现在一切皆组件。

ReactRouter中提供了以下三大组件：

• Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。

• Route路由规则匹配，并显示当前的规则对应的组件。

• Link路由跳转的组件
  当然每个组件下又会有几种不同的子类组件实现。比如： Router组件就针对不同功能和平台对应用：

• 浏览器的路由组件

• URL格式为Hash路由组件

• 内存路由组件

• Native的路由组件

• 地址不改变的静态路由组件
  三大组件使用的关系：