文章目录
一、React路由介绍
现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。
- 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面)
- 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
- 使用React路由简单来说,就是配置路径和组件
二、路由的基本使用
使用步骤
-
安装: yarn add react-router-dom
- 如果没有安装yarn工具的,需要先全局安装一下yarn:npm install -g yarn
-
导入路由的三个核心组件: 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 组件配置路由规则和要展示的组件(路由出口)
- Route包含在Routes元素中
// const First = () => <p>页面一的内容</p>
function First() {
return (
<p>页面一的内容</p>
)
}
// 使用Router组件包裹整个应用
const App = () => (
<Router>
<div>
<h1>React路由基础</h1>
{/* 指定路由入口 */}
<Link to="/first">页面一</Link>
{/* 指定路由出口 */}
<Routes>
<Route path="/first" element={<First></First>} />
</Routes>
</div>
</Router>
)
三、常用组件说明
Router 组件:
- 包裹整个应用,一个 React 应用只需要使用一次
- 两种常用 Router:HashRouter 和 BrowserRouter
- HashRouter:使用 URL 的哈希值实现(localhost:3000/#/first)
- (推荐)BrowserRouter:使用 H5 的 history API 实现(localhost:3000/first)
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
// import { HashRouter as Router, Route, Link } from 'react-router-dom'
Link 组件:
用于指定导航链接(a 标签)
// to属性:浏览器地址栏中的pathname(location.pathname)
<Link to="/first">页面一</Link>
Routes 组件:
指定路由展示组件相关信息
// path属性:路由规则
// component属性:展示的组件
// Route组件写在哪,渲染出来的组件就展示在哪
{/* 指定路由出口 */}
<Routes>
<Route path="/first" element={<First></First>} />
</Routes>
四、路由的执行过程
- 点击 Link 组件(a标签),修改了浏览器地址栏中的 url 。
- React 路由监听到地址栏 url 的变化。
- React 路由内部遍历所有 Route 组件,使用路由规则( path )与 pathname 进行匹配。
- 当路由规则(path)能够匹配地址栏中的 pathname 时,就展示该 Route 组件的内容。
五、编程式导航
react router 5
- 场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
- 编程式导航:通过 JS 代码来实现页面跳转
- history 是 React 路由提供的,用于获取浏览器历史记录的相关信息
- push(path):跳转到某个页面,参数 path 表示要跳转的路径
- go(n): 前进或后退到某个页面,参数 n 表示前进或后退页面数量(比如:-1 表示后退到上一页)
class Login extends Component {
handleLogin = () => {
// ...
this.props.history.push('/home')
}
render() { }
}
编程式导航是使用路由组件 this.props.history 提供的 API 进行路由跳转:
this.props.history.push(path, state)
this.props.history.replace(path, state)
this.props.history.goForward()
this.props.history.goBack()
this.props.history.go(n)
// 编程式导航传参
this.props.history.push(`/home/message/detail/${id}/${title}`)
this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)
this.props.history.push(`/home/message/detail`, { id: id, title: title })
withRouter 的使用
withRouter 的作用:加工一般组件,让其拥有路由组件的 API ,如 this.props.history.push 等。
import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
class Header extends Component {
...
}
export default withRouter(Header)
react router 6
useNavigate() 编程式路由导航
useNavigate() 返回一个函数,调用该函数实现编程式路由导航。函数有两种参数传递方式。
可以使用navigate这个函数代替this.history.push、this.history.replace、this.history.gofoward、this.history.goback、this.history.go
-
第一种方式传递两个参数:路由和相关参数。参数只能设置 replace 和 state。想要传递 params 和 search 参数直接在路由带上。
-
第二种方式传递数字,代表前进或后退几步。
import { BrowserRouter as Router, Route, NavLink, Routes, useNavigate } from 'react-router-dom'
六、默认路由 /
- 问题:现在的路由都是点击导航菜单后展示的,如何在进入页面的时候就展示呢?
- 默认路由:表示进入页面时就会匹配的路由
- 默认路由path为:/
<Route path="/" component={Home} />