详解前端路由实现与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 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue render函数动态加载img的src路径操作
Oct 26 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php判断表是否存在的方法
2015/06/18 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python实现AES加密解密
2019/03/28 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
书香家庭事迹材料
2014/05/09 职场文书
工地标语大全
2014/06/18 职场文书
2014年学生工作总结
2014/11/20 职场文书
读后感作文评语
2014/12/25 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript