现代的前端应用大多数都是 SPA (单页应用程序),也就是只有一个HTML页面的应用程序。因为他的用户体验更好、对服务器的压力也更小。所以前端路由是为了更有效的使用单个页面来管理原来多页面的功能。
- 路由的功能：让用户从一个视图导航到另一个试图（页面）
- 前端路由是一套映射规则，在React中，时URL路径与组件的关系
- 使用 React 路由简单来说，就是配置 路径 和 组件 （配对）
基本使用
- 安装
yarn add react-router-dom- 导入路由的三个核心组件： Router 、 Route、Link
import {BroeserRputer as Router, Route, Link} from "react-router-dom"- 使用 Router 组件 包裹整个应用
<Router>
<div>
... 省略页面内容
</div>
</Router>- 使用 Link 组件 作为导航菜单（路由入口）
<Link to="/first">页面跳转</Link>- 使用 Router 组件 配置路由规则和要展示的组件（路由出口）
const First = ()=> <p>页面跳转</p>
<Router>
<div>
<Link to="/first">页面</Link>
<Route path="/first" component={First}></Route>
</div>
</Router>常用组件说明
Router
- Router组件：包裹整个应用，一个React应用只需要使用一次
- 两种常用Router： HashRouter 和 BroewserRouter
- HashRouter：使用 URL 的哈希值实现（localhost:300/#/first）
- 推荐 BroewserRouter ：使用 H5 的 history API实现
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
import { HashRouter as Router, Route, Link } from "react-router-dom"Link
- 指定导航链接（a元素）
// to === href
<Link to="/first"></Link>Route
- 指定路由展示组件相关信息
// path 属性: 路由规则
// component 属性: 展示的组件
// Route 组件写在哪里,渲染出来的组件就展示在哪里
<Route path="/first" component={First}></Route>编程式导航
- 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现
- 变编程式导航：通过JS代码实现页面跳转
- history 是 React 路由提供的，用于获取浏览器历史记录的相关信息
- push(path) ：跳转到某个页面，参数 path 表示要跳转的路径
- go(n)：前进或者后退到某个页面，参数 n 表示前进或者页面数量
const Login = (props)=>{
const handleLogin = ()=>{
this.props.history.push("./home")
}
}匹配模式
模糊匹配模式
- 问题：当 Link 组件的 to 属性值为 “/login” 时，为什么默认路由也被匹配成功？
- 默认情况下，React路由是模糊匹配
- 模糊匹配规则：只要 pathname 以 path 开头就匹配成功
<Link to="/login">登录</Link>
<Rout 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={xxx}/>推荐：给默认路由添加 exact 属性。