react与react-router

时间:2023-12-28 21:27:14

路由在单页应用极其常见,不论是angularjs项目还是react项目,都有路由。
在react项目中使用路由,我们当然是全局安装react-router.
第一步:react与react-router
第二步:创建几个要跳转到的页面
react与react-router
第三步:配置routerMap
react与react-router
注意,代码中path='detail/:id',最后一个标记表示参数,例如/detail/123这个123就是参数
第四步:使用router
react与react-router
这里的hashHistory,规定用 url 中的 hash 来表示 router
第五步:页面跳转
Home页
react与react-router
List页
我们在 List 页面中,使用 js 跳转。
react与react-router
Detail页
点击 List 页面就进入了Detail页面,我们还可以给Detail页面手动添加type属性
react与react-router
快是前端页面优化的共同目标,如何让路由(即首页)加载的更快?其实也是让网页进入的更快。
抛开代码效率问题,其中一个解决方案就是先不要加载其他页面的代码,即按需加载
针对大型项目的静态资源懒加载问题,react-router 也给出了解决方案.

本博客升华自:大众点评app视频。
完整的demo见github:https://github.com/JserJser/reactWebApp/tree/master/react-router