?该图来自React 官方中文文档 – 用于构建用户界面的 JavaScript 库官方logo
目录
react路由介绍:React Router: Declarative Routing for React.js
路由安装:
路由组件相关:
NavLink 导航链接
Route 路由容器
重定向
匹配一个路由
路由离开调用弹框
跳转
404页面
路由的参数
子路由
路由props相关:
1. match匹配的路由
2.history历史记录
3.location地址栏信息
只有 Route 对应的component才有这三个自动注入参数
?
react路由介绍:React Router: Declarative Routing for React.js 一次学习,随处路由 组件是 React 强大的声明式编程模型的核心。React Router 是一组导航组件,它们以声明方式与您的应用程序组合在一起。无论您是想要为您的 Web 应用程序提供可添加书签的 URL还是在React Native 中导航的可组合方式,React Router 都可以在 React 渲染的任何地方使用——所以请选择! react路由手册: React Router: Declarative Routing for React.js 路由安装:安装命令:npm i react-router-dom@5.0 -S
npm i react-router-dom@5.0 -S 路由组件相关:BrowserRouter 浏览器路由 HashRouter 哈希路由
NavLink 导航链接exact精确匹配? ? ? ? ? ? ? ? ? ? to 链接地址? ? ? ? ? ? ? ? ? ? class="active"? 匹配状态
Route 路由容器exact精确匹配 (路径和配置的path完全匹配)? ?path 路由地址? ?component 组件
<Redirect> 重定向to 去哪儿? ??from 从那
<Switch> 匹配一个路由 <Prompt> 路由离开调用弹框when 当条件为真? ? ?message 弹出文本内容
<Link>跳转to=“/login”? ?
?to={{ pathname:"/login", search:"name=mumu&age=18", hash:"#good", state:{redirect:"xxx"} }}
参数 props里面的location一致的
404页面1. Switch 包裹(一次匹配一个)2. path=“*”? ??3. 配置放在最后面
路由的参数path="produce/:id”? ? ?切换 to=“/produce/abc”? ? ?获取:props.match.params.id
子路由 在主路由添加 <div> <Route path="/admin/dash" component={Dash}></Route> <Route path="/admin/orderlist" component={OrderList}></Route> {/* 重定向 */} <Redirect path="/admin" to="/admin/dash"></Redirect> </div> 路由props相关: 1. match匹配的路由params 路由的参数
isExact 是否精确匹配
path路径
url 地址
2.history历史记录push 跳转??replace 替换历史记录? ??go跳转历史记录? ?goBack 返回??goForward 前进? ??linsten 监听
location 同 location? ??length 长度
3.location地址栏信息hash哈希值? ??pathname地址名称? ? ??search 查询信息??state跳转传入数据
只有 Route 对应的component才有这三个自动注入参数
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |