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

路由

对于有过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文件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。