前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)。
前端路由是一套映射规则,在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 属性。