React路由介绍

现代前端应用大部分都是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好，对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。

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

路由的基本使用

使用步骤

安装：yarn add react-router-dom
导入路由的三个核心组件：Router/Route/Link
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
使用Router 组件包裹整个应用（重要）

<Router>
   <div className="App">
    //...
   </div>
</Router>

使用Link 组件作为导航菜单（路由入口）
<Link to="/first">页面一</Link>
使用Route 组件配置路由规则和要展示的组件（路由出口）

const First = () => <p>页面一的页面内容</p>
<Router>
   <div className="App">
      <Link to="/first">页面一</Link>
      <Route path="/first" component={First}></Route>
   </div>
</Router>

常用组件说明

Router组件：包裹整个应用，一个React应用只需要使用一次
两种常用Router：HashRouter和BrowserRouter
HsahRouter：使用URL的哈希值实现(localhost：3000/#/first)
(推荐)BrowserRouter：使用H5的history API实现(localhost：3000/first)
Link组件：用于指定导航链接(a标签)

//to属性：浏览器地址栏中的pathname（location.pathname)
<Link to="/first">页面一</Link>

Router组件：指定路由展示组件相关信息

//path属性：路由规则
//component属性：展示的组件
//Route组件写在哪，渲染出来的组件就展示在哪
<Route path="/first" component={First}></Router>

路由的执行过程

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

编程式导航

场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
编程式导航：通过JS代码来实现页面跳转
history是React路由提供的，用于获取浏览器历史记录的相关信息
push：跳转到某个页面，参数path表示要跳转的路径

class login extends Component {
   handleLogin = () => {
     // ...
     this.props.history.push('/home')
  }
  render() { ... }
}

go(n)：前进或后退到某个页面，参数n表示前进或后退页面数量(比如：-1表示后退到上一页)

默认路由

问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？
默认路由：表示进入页面时就会匹配的路由
默认路由path为：/
<Route path="/" component={Home} />

模糊匹配模式

问题：当Link组件的to属性值为"/login"时，为什么默认路由也被匹配成功？
默认情况下，React路由是模糊匹配模式
模糊匹配规则：只要pathname以path开头就会匹配成功

<Link to="/login">登录页面</Link>
<Route path="/" component={Home} />匹配成功
//path 代表Route组件的path属性
//pathname 代表Link组件的to属性(也就是location.pathname)

path	能够匹配的pathname
/	所有 pathname
/first	/first或/first/a 或/first/a/b/...

精确匹配

问题：默认路由任何情况下都会展示，如何避免这种问题？
给Route组件添加exact属性，让其变为精确匹配模式
精确匹配：只有当path和pathname完全匹配时才会展示该路由

//此时，该组件只能匹配pathname="/"这一种情况
<Route exact path="/" component=... />

推荐：给默认路由添加exact属性

小总结

React路由可以有效的管理多个视图(组件)实现SPA
Router组件包裹整个应用，只需要使用一次
Link组件是入口，Route组件是出口
通过props.history实现编程式导航
默认模糊匹配，添加exact变精确匹配
React路由的一切都是组件，可以像思考组件一样思考路由

React路由（基础版）

React路由介绍

路由的基本使用

使用步骤

常用组件说明

路由的执行过程

编程式导航

默认路由

模糊匹配模式

精确匹配

小总结