React路由-执行过程
切换页面时,执行过程如下:
- 点击 Link 组件(a标签),修改了浏览器地址栏中的 url
- React 路由监听到地址栏 url 的变化 hashchange popstate
- React 路由内部遍历所有 Route 组件,使用路由规则(path)与 pathname(hash)进行匹配
- 当路由规则(path)能够匹配地址栏中的 pathname(hash) 时,就展示该 Route 组件的内容
默认情况下,可以同事匹配多个路由,只要匹配成功,该路由组件对应的内容就会渲染到页面中
Switch 组件:包裹 Route 组件,只会渲染第一个匹配的组件,即使有多个路由都可以匹配成功
在实际开发时,通常会用 Switch 组件包裹 Route 组件
通过 Switch 组件非常容易的就能实现 404 页面功能
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/user">
<User />
</Route>
// 即使这个也可以匹配成功 /user/a 但是因为 Switch 组件的存在,这个路由对应的组件内容是不会渲染的
<Route path="/user/a">
<User1 />
</Route>
{/* 以上路由规则全都不匹配时,展示 404 页面 */}
{/* 注意:这个路由需要放在最后,兜底 */}
<Route>
<NoMatch />
</Route>
</Switch>
React路由-编程式导航
场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
编程式导航:通过 JS 代码来实现页面跳转
可以通过 useHistory hook 来拿到路由提供的 history 对象,用于获取浏览器历史记录的相关信息。常用操作:
push(path):跳转到某个页面,参数 path 表示要跳转的路径
replace(patch):跳转到某个页面,会替换当前的历史记录
go(n): 前进或后退到某个页面,参数 n 表示前进或后退页面数量(比如:-1 表示后退到上一页)
import { useHistory } from 'react-router-dom'
const Login = () => {
const history = useHistory()
const onLogin = () => {
// ...
history.push('/home')
}
return (
<button onClick={onLogin}>登录</button>
)
}
push(path)和 replace(path) 跳转路由的区别:
浏览器会自动记录访问过来的页面路径,可以简单的把理解为通过一个 数组 来记录的。
比如:我们访问了 3 个页面:['/login', '/home', '/search'],当前所在页面为:'/search'
此时,如果我们又通过 push('/a') 方法访问了一个新页面:'/a',此时,就相当于往数组中 push 了一条数据,
那么,访问该页面后,浏览器中的记录为:['/login', '/home', '/search', '/a']
此时,如果我们又通过 replace('/a') 方法访问了一个新页面:'/a',此时,就相当于把当前页面地址,替换为 '/a'
那么,访问该页面后,浏览器中的记录为:['/login', '/home', '/a']