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

 更新时间:2017年08月07日 09:52:14   作者:Gavin13140  
本篇文章主要介绍了详解前端路由和react-router使用姿势,详细的介绍了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文件。

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

相关文章

  • React声明组件的方法总结

    React声明组件的方法总结

    这篇文章主要给大家介绍了react声明组件有哪几种方法,各有什么不同,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • Vite + React从零开始搭建一个开源组件库

    Vite + React从零开始搭建一个开源组件库

    这篇文章主要介绍了Vite + React 如何从0到1搭建一个开源组件库,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • ReactJS入门实例教程详解

    ReactJS入门实例教程详解

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点,这篇文章主要介绍了ReactJS入门实例教程,需要的朋友可以参考下
    2022-06-06
  • webpack4 + react 搭建多页面应用示例

    webpack4 + react 搭建多页面应用示例

    这篇文章主要介绍了webpack4 + react 搭建多页面应用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 通过实例学习React中事件节流防抖

    通过实例学习React中事件节流防抖

    这篇文章主要介绍了通过实例学习React中事件节流防抖,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 减少react组件不必要的重新渲染实现方法

    减少react组件不必要的重新渲染实现方法

    这篇文章主要为大家介绍了减少react组件不必要的重新渲染实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React Native 使用Fetch发送网络请求的示例代码

    React Native 使用Fetch发送网络请求的示例代码

    本篇文章主要介绍了React Native 使用Fetch发送网络请求的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • React-Native中props具体使用详解

    React-Native中props具体使用详解

    本篇文章主要介绍了React-Native中props具体使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React Native实现Toast轻提示和loading效果

    React Native实现Toast轻提示和loading效果

    这篇文章主要介绍了React Native实现Toast轻提示和loading效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • react hooks入门详细教程

    react hooks入门详细教程

    这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04

最新评论