详解前端路由实现与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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
关于this和self的使用说明
Aug 01 Javascript
AngularJS语法详解
Jan 23 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue实现百度语音合成的实例讲解
Oct 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
php下使用iconv需要注意的问题
2010/11/20 PHP
Smarty3配置及入门语法
2017/02/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python序列类型种类详解
2020/02/26 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
Python如何将list中的string转换为int
2022/07/15 Ruby