React Router

董俊豪
2022-02-25 / 0 评论 / 0 点赞 / 918 阅读 / 511 字
温馨提示:
本文最后更新于 2022-05-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

原理:检测浏览器url地址变化,截获url地址,然后进行路由匹配

import { Router,Switch } from 'react-router'
import
from 'react-router-dom'

1.Router组件

*每个router都会创建一个history对象,用来保持当前位置追踪
编程式导航:props.history.push('/about')

2.Route组件

需要渲染方法的普通组件,路由匹配成功则渲染该组件

path:'' 路由匹配规则
component:渲染的组件
exact 严格模式声明 /
render:逻辑操作 path匹配操作
children: 任何时候都会执行,函数操作 match{}
chilren>component>render

3.Switch

对Route进行分组,匹配到一个不再往下匹配,实现404页面

声明式可访问导航

跳转home ## 5.Redirect 重定向组件 to: push: from: 将要进入的url exact: { return isLogin? :}}> ## 6.动态路由 获取url参数{props.match.params.id} ## 7.嵌套路由 二级路由 二级路由
0

评论区