本文共 3324 字,大约阅读时间需要 11 分钟。
//定义跳转方式# .docuemnt.elementId("app")
问题:
当/detail 不带参数的时候会报错 解决方式: vue是使用 path=“home/:id?”class home …{
return (this.props.history.push('/detail/' + value);
calss main extent component { return{home{this.props.children}//子路由显示的地方 }}
< Redirect > 组件
它会始终执行浏览器重定向,当处于V3路由有排他性,即一次只能渲染一条, V4中上面的会将匹配的路由的组件都渲染,v4使用
例:
这样的即使没有home没有exact,它也会被渲染因为Redirect;
路由/user 时,匹配如下:
匹配了/user,不匹配/user/list(因为这里使用了switch排他路由)所以,当需要同时匹配 /user 和/user/list的话,可将/user/list写于 /user前面,
结果:
/user/12 与/user/add都能匹配,渲染userTop,但实际上,需求是只有/user/12详情的时候才渲染,因此就需要“正则路由”:必须是数字<Route path="/user/:userId(\\dt)" component={userTop}/>
路由不适用Route嵌套,而是写在组件component下,以前路由嵌套时,除了写路由,还要写路由渲染的地方,即<this.props.children>,
这样,路由就会在此渲染,V4改变,匹配路由的组件想在哪渲染,路由就写在哪,即路由直接替代<this.props.children>的位置;相当于vue抽象路由view的是this.props.children
在console中的rendeing;
把Paint Flashing勾选上,当渲染的时候会有标记;这里的子路由的跳转,每次都会加载子组件以及父组件重新加载,然后移除(删除,在生命周期的右边)其他的路由;
为什么父组件会被渲染? 因为子路由是属于父组件的,切换路由的时候是改变了父组件的props,所以会触发父组件的更新; react中如果数据更新只会更新相应的位置,这种技术是react的diff算法; 重绘是整个页面重新刷新; 重排是局部;与vue不同的是,v4的路由不需要写抽象路由,直接哪里需要放哪里,路由标签替代抽象路由。
但是,所有的路由的配置都写在一个位置,包括所有嵌套路由: 所以子路由中的路由的嵌套不需要引入子路由,而是在总的路由的配置中引入;并且这个时候记得to的路由路径应该是加上子路由的路径; 例一个项目的路由配置,这里写在app.js:react-route的话有:history.goback()
ps:window.history.back();也可以撒,为啥不用?
React Router v4 还有很多其他很酷的方面。最后,一定要提几件小事,以免到时它们让你措手不及。
const PrimaryHeader = () => () Welcome to our app!
使用 < NavLink> 可以让我给任何一个激活的链接设置一个 active 样式。而且,需要注意的是,我也可以给它们添加 exact 属性。如果没有 exact,由于 v4 的包容性匹配策略,那么在访问 /app/users 时,主页的链接将处于激活中。就个人经历而言,NavLink 带 exact属性等价于 v3 的 ,而且更稳定。
URL 查询字符串
再也无法从 React Router v4 中获取 URL 的查询字符串了动态路由
关于 v4 ( )路由,可以随时随地渲染它们。UserLayout:(由/users匹配渲染)
使用match:
【match中的match.path与match.url】
path是路由的编写 url是浏览器实际路径path用于匹配路由模式,用于构建嵌套
url匹配url,用于构建嵌套的v4 API
【match】 match使用路由时: <Route path={${this.props.match.path}/agency
} component={AgencyDetail}/> <Route path={ ${this.props.match.path}/agency/:agencyId
} component={AgencyDetail}/> [以上太久之前的笔记了,如有错误,请指出☺]
转载地址:http://biurf.baihongyu.com/