react-router-dom笔记
来源:互联网 发布:php 前端 后端 编辑:程序博客网 时间:2024/06/12 23:11
参考文章: 初探 React Router 4.0
- import
as
关键字用来给导入的变量设置新的名字,同时可以将整个模块导入。
改名字:import { lastName as surname } from './profile';整体加载:import * as circle from './circle';console.log('圆面积:' + circle.area(4));console.log('圆周长:' + circle.circumference(14));
- exact用于精准匹配路径,不用exact也会匹配到匹配的路径的子路径,这样两个路由组件都会显示。我们需要的是每次切换只会显示一个Route中指定的组件
<Route exact path="/" component={App}></Route><Route path="/hot" component={Hot} ></Route>
传递参数到路由对应的组件:在参数前面加上
:
,比如${match.url}/:id
,match.params(函数式声明的组件中,match需要在函数参数中引入)或this.props.match.params(React class类render函数中)
路由路径参数传递到模板,用baseUrl/:id类似格式,组件中用match.params.id接收。
Link组件通过to属性链接到对应
path
的Route
组件后 会渲染component属性对应的组件到页面上。路由的嵌套:${match.url}可以获取到当前的基础路径。然后在路由用到的组件中可以用。
路由的嵌套,直接在子组件模板中添加Route,Link,match.url引入基础路径
Route 自带三个 render method 和三个 props 。
render methods 分别是:<Route component><Route render><Route children>props 分别是:matchlocationhistory
当访问地址和路由匹配时,一个 React component 就会被渲染,此时此组件接受 route props (match, location, history)。
match 对象包含了 Route path 如何与 URL 匹配的信息,具有以下属性:
params: object 路径参数,通过解析 URL 中的动态部分获得键值对
isExact: bool 为 true 时,整个 URL 都需要匹配
path: string 用来匹配的路径模式,用于创建嵌套的 Route
url: string URL 匹配的部分,用于嵌套的 Link在以下情境中可以获取 match 对象
在 Route component 中,以 this.props.match获取
在 Route render 中,以 ({match}) => () 方式获取
在 Route children 中,以 ({match}) => () 方式获Router/Route 的改变:V4 Router组件里只能渲染一个组件,V2和V3可以渲染多个。
NavLink
Link 的特殊版,为页面导航准备的。因为导航需要有 “激活状态”。
activeStyle: object
如果不想使用样式名就直接写styleactiveClassName: string
导航选中激活时候应用的样式名,默认样式名为 activeexact: bool
若为 true,只有当访问地址严格匹配时激活样式才会应用在Route中同时使用render和component时render方法不会起作用!
replace使得该链接的上一个链接回退时会跳过
<Switch> 只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>
为什么 RR4 机制里不默认匹配第一个符合要求的呢?
答:这种设计允许我们将多个<Route>组合到应用程序中,例如侧边栏(sidebars)等等。<Switch>下的子节点只能是
<Route>
或<Redirect>
元素。只有与当前访问地址匹配的第一个子节点才会被渲染。<Route> 元素用它们的 path 属性匹配,<Redirect>元素使用它们的 from 属性匹配。如果没有对应的 path 或 from,那么它们将匹配任何当前访问地址。单页面应用程序最终组件的结构:BrowserRouter–>div–>链接组件和路由组件 。
!!e.target.value.trim():表示将字符串转化为Boolean值,第一个感叹号对字符串取反,第二个字符串再次取反从而实现转换。
- react-router-dom笔记
- react-router学习笔记
- react-router 学习笔记
- react-router 学习笔记
- react-router 学习笔记
- React-Router 学习笔记
- react-router 学习笔记
- react-router 学习笔记
- React-Router 学习笔记
- react-router学习笔记
- 使用react router V4(react-router-dom)遇到的一些问题
- react-router-dom 通过Link传值的坑人表现!
- react-router学习笔记之入门
- react-router学习笔记之入门
- react-router 4.0版本使用笔记
- React Router笔记 -- 摘自阮一峰大神博客
- react-router 4.0版本使用笔记
- react-router
- 要提高SQL查询效率where语句条件的先后次序应如何写
- 2017CCPC哈尔滨赛区总结
- Java中使用Jedis操作Redis
- mycat mybatis 调用存储过程&多语句操作
- 《集体智慧编程》第五章 优化
- react-router-dom笔记
- 3.3 Handler消息传递机制浅析
- c# 接口
- 解决Scrollview嵌套Recyclerview,Gridview等出现内容显示不全等为
- 阿里云服务器同步MySQL数据库
- MySQL日期时间函数大全
- 不使用jsp来展示页面
- css3典型动画集合
- python实现共轭梯度法求解方程组