React 路由

前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。
前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系。
使用React路由简单来说，就是配置 路径和组件（配对）。

1 使用步骤

1. 安装：yarn add react-router-dom
2. 导入路由的三个核心组件：Router / Route / Link
3. 使用 Router 组件包裹整个应用（重要）
4. 使用 Link 组件作为导航菜单（路由入口）（a标签）

<Link to="/first">页面一</Link>

5. 使用 Route 组件配置路由规则和要展示的组件（路由出口）

<Route path="/first" component={First}></Route>

2 常用组件说明

• Router 组件：包裹整个应用，一个 React 应用只需要使用一次
•  两种常用 Router：HashRouter 和 BrowserRouter
•  HashRouter：使用 URL 的哈希值实现（localhost:3000/#/first）
•  （推荐）BrowserRouter：使用 H5 的 history API 实现（localhost:3000/first）

3. 路由的执行过程

• 1. 点击 Link 组件（a标签），修改了浏览器地址栏中的 url 。
• 2. React 路由监听到地址栏 url 的变化。
• 3. React 路由内部遍历所有 Route 组件，使用路由规则（ path ）与 pathname 进行匹配。
• 4. 当路由规则（path）能够匹配地址栏中的 pathname 时，就展示该 Route 组件的内容。

4. 编程式导航

•  场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
•  编程式导航：通过 JS 代码来实现页面跳转
•  history 是 React 路由提供的，用于获取浏览器历史记录的相关信息
•  push(path)：跳转到某个页面，参数 path 表示要跳转的路径
•  go(n)： 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）

class Login extends Component {
handleLogin = () => {
this.props.history.push('/home')
}
render() {...省略其他代码}
}
 

 5 默认路由

 默认路由：表示进入页面时就会匹配的路由
 默认路由path为：/
<Route path="/" component={Home} />

6 匹配模式

默认情况下，React 路由是模糊匹配模式
模糊匹配规则：只要 pathname 以 path（\） 开头就会匹配成功

精确匹配
 给 Route 组件添加 exact 属性，让其变为精确匹配模式
 精确匹配：只有当 path 和 pathname 完全匹配时才会展示该路由
// 此时，该组件只能匹配 pathname=“/” 这一种情况
<Route exact path="/" component=... />
推荐：给默认路由添加 exact 属性。