详解前端路由实现与react-router使用姿势


Posted in Javascript onAugust 07, 2017

路由

对于有过SPA开发经验的人来说,路由这个名词并不陌生,前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。它的 URI 规则中需要带上 #。Web 服务并不会解析 hash,也就是说 # 后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash 读取到的,读取到路径加以解析之后就可以响应不同路径的逻辑处理。

简单介绍AngularJs UI-Router路由

如果你有过AngularJS开发经验,#并不陌生,angularjs有自己官方实现的路由体系,也有比较具有代表性的第三方嵌套路由机制UI-Router; 如下代码块所示:

.state("main.list",angularAMD.route({
    url : '/list/:params',//url &参数
    views : {
      "header@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/Header.html',
        controller:'HeadController',
        controllerUrl:[ ****.js
                  ]
      }),
      "menu@main" : angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MenuModule.html',
        controller : "MenuController",
        controllerUrl:[ ****.js]
      }),
      "mainContent@main":angularAMD.route({
        templateUrl : 'simple/view/main/html/main/MainContent.html'
      })
    }
  }))

state()函数的第一个参数就是路由,“main.list” 是一个嵌套路由机制,当页面跳转到 “main.list”路由下时会先加载 state(“main”,*)下的模块及其资源(html,js等),随后加载state(”main.list”)下的模块和资源(html,js等),实现路由嵌套;

react-router

-先上一段代码

<Router history={ hashHistory }>
  <Route path='/' component={CoreLayout}>
  <IndexRoute component={HomeView}/>
  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>
  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>
  <Route path=“/CHART_ROUTE” component={ChartView}/>
  </Route>
</Router>

React-router以jsx语法类似于DOM结构的形式实现router嵌套;与AngularJs 的UI-Router看似差别很大,实则思想雷同;

Angular的实现逻辑:

跳转=》state=》module=》静态资源(js,css,html)=》show(页面展示)

react-router的实现逻辑:

跳转=》path=》component=》静态资源(js,css,html)=》show(页面展示)
本文主要讲react-router,下面简单介绍react-router的使用姿势:

react-router常用组件入门

嵌套路由

<Router history={hashHistory}>
 <Route path="/" component={App}>
  <Route path="/repos" component={Repos}/>
  <Route path="/about" component={About}/>
 </Route>
</Router>

上面代码中,用户访问/repos时,会先加载App组件,然后在它的内部再加载Repos组件。

<App>
 <Repos/>
</App>

子路由也可以不写在Router组件里面,单独传入Router组件的routes属性

let routes = <Route path="/" component={App}>
 <Route path="/repos" component={Repos}/>
 <Route path="/about" component={About}/>
</Route>;

<Router routes={routes} history={browserHistory}/>

path 属性

Route组件的path属性指定路由的匹配规则,看下面例子

<Route path="inbox" component={Inbox}>
  <Route path="messages/:id" component={Message} />
</Route>

上面代码中,当用户访问/inbox/messages/:id时,会加载下面的组件。

<Inbox>
 <Message/>
</Inbox>

IndexRoute 组件

类似index.html ,默认加载组件,下面代码默认加载home组件

<Router>
 <Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="accounts" component={Accounts}/>
  <Route path="statements" component={Statements}/>
 </Route>
</Router>

现在,用户访问/的时候,加载的组件结构如下。

<App>
 <Home/>
</App>

Redirect 组件

Redirect组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由。

<Route path="inbox" component={Inbox}>
 {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
 <Redirect from="messages/:id" to="/messages/:id" />
</Route>

现在访问/inbox/messages/5,会自动跳转到/messages/5。

Link

Link组件用于取代a标签,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是a标签的React 版本,可以接收Router的状态。

表单处理

Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?

第一种方法是使用browserHistory.push

handleSubmit(event) {
  event.preventDefault()
  const userName = event.target.elements[0].value
  const repo = event.target.elements[1].value
  const path = `/repos/${userName}/${repo}`
  browserHistory.push(path)
 }

${userName} 一种后端语言常用的表达式写法,可在字符串中取变量

handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },

第二种方法是使用context对象。

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

多人协作开发router文件管理

一般一个项目都会有一个统一的router文件,相当于一个router池,不同的请求,请求router池中所匹配的路径,加载请求所需页面。 but 。。。 每个开发者开发一个组件都会需要配置路由,会导致router文件不易管理,容易导致冲突,甚至故障。 so。。,也许,可能可以每个组件文件夹下对于一个XXX.router 文件,前端代码打包上传到线上时触发某个钩子函数,将XXX.router文件统一合并到中央router文件中,从而避免多人操作router文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
js单词形式的运算符
May 06 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
React中使用collections时key的重要性详解
Aug 07 #Javascript
react路由配置方式详解
Aug 07 #Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 #Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
jquery+css实现简单的图片轮播效果
Aug 07 #jQuery
bootstrap table表格客户端分页实例
Aug 07 #Javascript
You might like
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
浅析Python中的for 循环
2016/06/09 Python
python的re正则表达式实例代码
2018/01/24 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
详解Django配置JWT认证方式
2020/05/09 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
区分python中的进程与线程
2020/08/13 Python
Python二元算术运算常用方法解析
2020/09/15 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
毕业生找工作推荐信
2013/11/21 职场文书
感恩教师节主题班会
2015/08/12 职场文书
关于感恩的作文
2019/08/26 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL