[react-router] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?

[react] React-Router 3和React-Router 4有什么变化?添加了什么好的特性?

React-Router 4 从设计思想上进行改变,引入动态路由,将路由进行了拆分,将其放到了各自的模块中,不再有单独的 router 模块,充分体现了组件化的思想,更加贴合 React 的思想。

具体表现:

  • 包含式路由与exact
    • 在之前的版本中,在 Route 中写入的 path,在路由匹配时是独一无二的,路由的嵌套体现在 <Route> 组件的嵌套规则上
    • v4 版本则有了一个包含的关系:如匹配 path="/users" 的路由会匹配 path="/"的路由,在页面中这两个模块会同时进行渲染。
    • v4中多了 exact 关键词,表示只对当前的路由进行匹配。
  • 独立路由:Switch(排他性路由)
    • 采用 <Switch>,只有一个路由会被渲染,并且总是渲染第一个匹配到的组件
    • 配合使用 exact
  • "Index Routes" 和 "Not Found"
    • 废弃了 <IndexRoute>,而该用 <Route exact> 的方式进行代替
    • 如果没有匹配的路由,也可通过 <Redirect> 来进行重定向到默认页面或合理的路径。
  • 嵌套布局
  • 授权路由
  • <Link> vs <NavLink>
  • URL 查询字符串

 个人简介

我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论















主目录

与歌谣一起通关前端面试题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/404380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebService学习总结——调用第三方提供的webService服务

互联网上面有很多的免费webService服务&#xff0c;我们可以调用这些免费的WebService服务&#xff0c;将一些其他网站的内容信息集成到我们的Web应用中显示&#xff0c;下面就以获取天气预报数据。气象中心的管理系统将收集的天气信息并将数据暴露出来(通过WebService Server)…

【017】◀▶ C#学习(九) - ADO.NET

《C#入门经典&#xff08;中文第四版&#xff09;》在程序中访问数据库学习笔记 --------------------------------------------------------------------------------------------------------- ●● 目录&#xff1a; A0 ………… System.Data.SqlClient 命名空间 A1 ……………

[react] 浏览器为什么无法直接JSX?怎么解决呢?

[react] 浏览器为什么无法直接JSX&#xff1f;怎么解决呢&#xff1f; 因为浏览器只能解决原生的JS代码&#xff0c;jsx不属于原生的js&#xff0c;它是类似于html的语法&#xff0c;然后转化成一个js对象。 这个转化的过程就是通过Babel的babel/plugin-transform-react-jsx插…

vim 基础学习之文件跳转

1. -当前文件上次跳转之前的位置2. .-当前文件上次修改的位置,只要是发生了可能导致变化的命令操作就会被标记&#xff0c;哪怕实际结果没有变化3. ^-当前文件上次插入的位置,只要是发生了插入操作命令就会被标记&#xff0c;哪怕实际结果没有变化4. [-当前文件上次修改或者复制…

[react] react声明组件有哪几种方法,各有什么不同?

[react] react声明组件有哪几种方法&#xff0c;各有什么不同&#xff1f; 1、无状态组件 2、有状态组件 3、高阶组件 4、容器组件 5、回调组件 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目…

【转】主流PHP框架间的比较(Zend Framework,CakePHP,CodeIgnit...

2019独角兽企业重金招聘Python工程师标准>>> 【转】主流PHP框架间的比较&#xff08;Zend Framework&#xff0c;CakePHP&#xff0c;CodeIgniter&#xff0c;Symfony&#xff0c;ThinkPHP&#xff0c;FleaPHP&#xff09; 2011年08月14日 星期日 12:51 转载自 leol…

[react] createElement与cloneElement两者有什么区别?

[react] createElement与cloneElement两者有什么区别&#xff1f; createElement是创建一个React元素&#xff0c;jsx即是这个函数的语法糖&#xff1b;它的函数签命是React.createElement(type, [props], [...children])cloneElement是拷贝一个React元素&#xff0c;可选择在…

第8章 Service基础Activity与Service绑定

要知道如果调用函数startService方法&#xff0c;那么即使你的程序退出了&#xff0c;但是Service依然运行在后台;也就是说此时想要停止service必须调用stopService方法。 现在我们把Activity与Service绑定在一起&#xff0c;那就是Service要随着程序的退出而终止&#xff0c;此…

[react-router] React-Router 4的switch有什么用?

[react-router] React-Router 4的switch有什么用&#xff1f; Switch的 子组件只能是Route或者Switch组件&#xff0c;它的作用是匹配到下面的第一个路由组件&#xff0c;下面的路由组件就不再进行匹配展示了 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。…

linux_shell_根据网站来源分桶

应用场景&#xff1a; 3kw行url\thtml记录 【网站混合】 需要&#xff1a;按照网站来源分桶输出 执行shell cat */*pack.html|awk -F \t {split($1,arr,"/");sitearr[3];print $0 > site} 转载于:https://www.cnblogs.com/cphmvp/p/5139994.html

[react] 你知道Virtual DOM的工作原理吗?

[react] 你知道Virtual DOM的工作原理吗&#xff1f; Virtual DOM是什么&#xff1a;虚拟DOM是真实DOM的javascript对象的映射Virtual DOM的工作原理&#xff1a;数据驱动视图更新这个过程中&#xff0c;首先会改变虚拟DOM对象&#xff0c;一个视图的更新周期&#xff0c;首先…

C#正则表达式积累

感谢&#xff1a;侧身向南边 http://www.cnblogs.com/kissknife/archive/2008/03/23/1118423.html的分享给了自己学习的机会 -------------------------------------C#的正则表达式-------------------------------------------的作用&#xff1a;string x"D:\\My Huang…

如何利用业务时间提升自我

转载于:https://www.cnblogs.com/helloIT/articles/5140273.html

[react] react兄弟组件如何通信?

[react] react兄弟组件如何通信&#xff1f; 状态提升&#xff0c;通过父组件的state和方法传递到两个子组件 个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

'800a0005' 图片上传出现写入文件失败的错误 -- 修改pload_5xsoft.inc

一、基本问题 一般是文件写入的路径不对&#xff0c;或者是目录的权限没有设置好&#xff08;必须对everyone或者来宾用户IIS_IUSRS设置为完全访问&#xff09; 二、特殊问题 1、错误提示&#xff1a; ADODB.Stream 错误 800a0bbc 写入文件失败。 /code/zhaosheng1/ADMIN/uplo…

AutoMapper用法一瞥

前段时候做个小项目用到了autoMapper&#xff08;参考了NOP里的用法&#xff09;&#xff0c;感觉还行&#xff0c;用起来挺方便的。首先复杂的东西我就不说了&#xff0c;至于详细的教程我也就不写了&#xff0c;比较园子里有很多这样的文章&#xff0c;我就分享下&#xff0c…

ping得通外网,上得了QQ,游戏,却打不开网页。

操作系统&#xff1a;win7_64bit 下午帮我小艾优化电脑&#xff0c;不知道把什么插件给卸载了。 她回来以上就上不了网&#xff0c;我首先ping网关&#xff0c;DNS&#xff0c;外网&#xff0c;都通。 登QQ正常。 我的思路&#xff1a; 先把Socket套字结相关的卸载掉就是&#…

WebGIS中一种根据网格索引判断点面关系的方法

文章版权由作者李晓晖和博客园共有&#xff0c;若转载请于明显处标明出处&#xff1a;http://www.cnblogs.com/naaoveGIS/。 1.背景 判断点面关系的算法有很多&#xff0c;在我之前的博文中有一篇专门对其进行了描述&#xff1a;判断点是否落在面中的Oracle存储过程描述。其中提…

[react] 怎样在react中创建一个事件?

[react] 怎样在react中创建一个事件&#xff1f; var EventEmitter require(events).EventEmitter; class App extends Component{ constructor(props){ super(props); } componentDidMount(){ this.itemChange emitter.addListener(ItemChange, (msg,data)>console.log(…

重写Checkbox 改写选择框的大小

/* 作者&#xff1a;Starts_2000* 日期&#xff1a;2009-07-30* 网站&#xff1a;http://www.csharpwin.com CS 程序员之窗。* 你可以免费使用或修改以下代码&#xff0c;但请保留版权信息。* 具体请查看 CS程序员之窗开源协议&#xff08;http://www.csharpwin.com/csol.html&…