reactRouter V4 的使用

clasnake 发布于2019-08-23 11:41 / 1940人阅读

摘要：这是关于自己对版本学习理解做的这里献上官方文档参考死循环之自己引用自己组件解释创建创建路由显示什么组件显示在什么位置它有三个用来定义渲染内容将迭代所有子元素仅渲染与当前位置匹配的第一个子元素当没有路径与当前位置匹配的时候就选择没有设置的组

这是关于自己对 REACT-router v4+ 版本学习理解做的dome

## 这里献上git
## 官方文档
## 参考
## react 死循环之自己引用自己.

组件解释

BrowserRouter : 创建URL

 
 http://example.com/about

HashRouter: 创建URL

 
 http://example.com/#/about

Route : 路由显示什么组件,显示在什么位置,它有三个props用来定义渲染内容:

component

render

children

switch : The is not required for grouping s, but it can be quite useful. A will iterate over all of its children elements and only render the first one that matches the current location. This helps when multiple route’s paths match the same pathname, when animating transitions between routes, and in identifying when no routes match the current location (so that you can render a “404” component).=>{

switch 将迭代所有route子元素,仅渲染与当前位置匹配的第一个子元素.

当没有路径与当前位置匹配的时候就选择没有设置path props 的组件进行渲染.(这样的功能可以实现404的效果)

Link : a 链接作用, to 属性不能少.

NavLink : 一个特殊版本，它将在与当前URL匹配时为渲染元素添加样式属性。

Redirect : 当被使用的时候,它会将当前url导入他的to值指向的url组件.

dome笔记 路由器组件只能有一个子元素,子元素可以是HTML 元素div - 或反应组件.

dome1 是关于基本的使用.

exact 作用的让定义了这个props的组件仅在url等于path值的时候显示.

match 在 this.props 中

dome2 是关于url参数的获取.

官方文档说:可以使用正则表达式来控制应匹配哪些参数值.

参数可以使用正则表示式匹配,也就是说,只要当参数为:asc 或者 desc 的时候我们的组件ComponentWithRegex 才显示, direction 可以随时设置,这里并不是一个函数.

dome3 理解 switch

switch 将迭代所有route子元素,仅渲染与当前位置匹配的第一个子元素.

当没有路径与当前位置匹配的时候就选择没有设置path props 的组件进行渲染.(这样的功能可以实现404的效果)

重定向

自定义路由

云服务器 GPU云服务器 ReactRouter v4 v4包 v4.php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97331.html

ReactRouter升级 v2 to v4

摘要：概述相对于几乎是重写了新版的更偏向于组件化。汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用，那么一定会很快上手新版的。被一分为三。不止是否有意义参考资料迁移到关注点官方文档概述 react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is comp...

JasonZhang 2019-08-20 17:26 评论0 收藏0
NiceFish-React

摘要：大漠穷秋于赠此笔名。是版本的实现，和版本保持风格一致。码云最有价值的开源项目这是版的实现，和版本保持风格一致。采用版本，使用组件库以及开发。已推荐这是的服务端代码，基于。如果你需要与这个后端代码进行对接，请检出本项目的分支。你好，我是徐晓东，笔名燕云长风。大漠穷秋于 2019-03-16 21:22 赠此笔名。寓意：结合李白著名的边塞诗《关山月》取【燕云长风】—— 长风几万里，吹...

Terry_Tai 2019-08-26 13:43 评论0 收藏0
【进阶4-2期】Object.assign 原理及其实现

摘要：木易杨注意原始类型被包装为对象木易杨原始类型会被包装，和会被忽略。木易杨原因在于时，其属性描述符为不可写，即。木易杨解决方法也很简单，使用我们在进阶期中介绍的就可以了，使用如下。引言上篇文章介绍了赋值、浅拷贝和深拷贝，其中介绍了很多赋值和浅拷贝的相关知识以及两者区别，限于篇幅只介绍了一种常用深拷贝方案。本篇文章会先介绍浅拷贝 Object.assign 的实现原理，然后带你手动实...

layman 2019-08-23 18:04 评论0 收藏0
webpack 构建性能优化策略小结

摘要：但是，随者工程开发的复杂程度和代码规模不断地增加，暴露出来的各种性能问题也愈发明显，极大的影响着开发过程中的体验。对应的资源也可以直接由页面外链载入，有效地减小了资源包的体积。背景如今前端工程化的概念早已经深入人心，选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配，而在诸多的构建工具中，webpack以其丰富的功能和灵活的配置而深受业内吹捧，逐步取代了grunt和gu...

hiYoHoo 2019-08-21 11:21 评论0 收藏0
FEDay 参会小记

摘要：介绍微信风格的，与客户端体验一致，这个自己去微信上看吧，略。微信调试一件套，网页授权模拟集成代理远程调试。这些在微信开发者中心有介绍，略。年微信开发经验的人，终于又成为了零年开发经验的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活动地址：http://fequan.com/2016/ 注意：英文不好，小记也带有自己...

xcc3641 2019-08-19 17:53 评论0 收藏0