React路由管理之React Router总结

原创 年树先生 随笔 前端技术 12570阅读 24 天前 举报

React Router是做什么的呢,官方的介绍是:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。

下面是一些React Router的用法:
简单渲染Route
有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。

这里使用了hashHistory - 它管理路由历史与URL的哈希部分。
添加更多的路由,并指定它们对应的组件

Link

这里使用了Link 组件,它可以渲染出链接并使用 to 属性指向相应的路由。

嵌套路由
如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。
实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:

因此,可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享:

接下来,在App中将children渲染出来:

有效链接

Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。

可以使用 activeStyle 指定有效链接的样式,也可以使用activeClassName指定有效链接的样式类。
大多数时候,我们并不需要知道链接是否有效,但在导航中这个特性则十分重要。比如:可以在导航栏中只显示合法的路由链接。

可以在NavLink中指定只有 .active 的链接才显示,这样如果路由无效,则该链接就不会出现在导航栏中了。
URL参数
考虑下面的url:

url中的可变参数可以通过 this.props.params[paramsName] 获取到:

接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。
默认路由

这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。
同理也有 默认链接组件 IndexLink。、
使用Browser History
前面的例子一直使用的是hashHistory,因为它一直可以运行,但更好的方式是使用Browser History,它可以不依赖hash端口 (#)。
首先需要改 index.js:

其次需要 修改webpack的本地服务配置,打开 package.json 添加 –history-api-fallback :

最后需要在 index.html中 将文件的路径改为相对路径:

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复