关于react-router的几种配置方式

刘永祥发布于2019-08-20 18:16 / 2847人阅读

摘要：本文给大家介绍的是相比于其他框架更灵活的配置方式，大家可以根据自己的项目需要选择合适的方式。标签的方式下面我们看一个例子当为时渲染我们可以看到这种路由配置方式使用标签，然后根据找到对应的映射。

路由的概念

路由的作用就是将url和函数进行映射，在单页面应用中路由是必不可少的部分，路由配置就是一组指令，用来告诉router如何匹配url，以及对应的函数映射，即执行对应的代码。

react-router

每一门JS框架都会有自己定制的router框架，react-router就是react开发应用御用的路由框架，目前它的最新的官方版本为4.1.2。本文给大家介绍的是react-router相比于其他router框架更灵活的配置方式，大家可以根据自己的项目需要选择合适的方式。

1.标签的方式

下面我们看一个例子：

import { IndexRoute } from "react-router"

const Dashboard = React.createClass({
  render() {
    return Welcome to the app!
  }
})

React.render((
  
    
      {/* 当 url 为/时渲染 Dashboard */}
      
      
      
        
      
    
  
), document.body)

我们可以看到这种路由配置方式使用Route标签，然后根据component找到对应的映射。

这里需要注意的是IndexRoute这个有点不一样的标签，这个的作用就是匹配"/"
的路径，因为在渲染App整个组件的时候，可能它的children还没渲染，就已经有"/"页面了，你可以把IndexRoute当成首页。

嵌套路由就直接在Route的标签中在加一个标签，就是这么简单

2.对象配置方式

有时候我们需要在路由跳转之前做一些操作，比如用户如果编辑了某个页面信息未保存，提醒它是否离开。react-router提供了两个hook，onLeave在所有将离开的路由触发，从最下层的子路由到最外层的父路由，onEnter在进入路由触发，从最外层的父路由到最下层的自路由。

让我们看代码：

const routeConfig = [
  { path: "/",
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: "about", component: About },
      { path: "inbox",
        component: Inbox,
        childRoutes: [
          { path: "/messages/:id", component: Message },
          { path: "messages/:id",
            onEnter: function (nextState, replaceState) {
              //do something
            }
          }
        ]
      }
    ]
  }
]

React.render(, document.body)

3.按需加载的路由配置

在大型应用中，性能是一个很重要的问题，按需要加载JS是一种优化性能的方式。在React router中不仅组件是可以异步加载的，路由也是允许异步加载的。Route 可以定义 getChildRoutes，getIndexRoute 和 getComponents 这几个函数，他们都是异步执行的，并且只有在需要的时候才会调用。

我们看一个例子：

const CourseRoute = {
  path: "course/:courseId",

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require("./routes/Announcements"),
        require("./routes/Assignments"),
        require("./routes/Grades"),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require("./components/Index"))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require("./components/Course"))
    })
  }
}

这种方式需要配合webpack中有实现代码拆分功能的工具来用，其实就是把路由拆分成小代码块，然后按需加载。

服务器托管云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84270.html

使用React 应当注意的几个地方

摘要：都会造成错误，注意一定一定严格的用，所以我建议直接复制我的。因为用的话他会转义代码，写不写其实一个样。不可避免的，构建肯定是要用到的。这个时候一般用的是在外面保存然后里面调用第二个坑更隐蔽。目标人群献给熟悉基础的React语法的刚接触React的同学~ 如果你已经写过半年以上的React那也不用看了，毕竟我水平并不高 Whats React React 是一个不存在的网络公司Fac...

高璐 2019-08-19 17:11 评论0 收藏0
【全栈React】第17天: 客户端路由

摘要：但是使用标记将告诉浏览器处理路由就像服务器端路由一样。组件需要一个称为的属性指向要渲染的客户端路由。发生这种情况的原因是响应路由器将渲染与路径匹配的所有内容除非另有指定。属性预计将是一个函数将在对象连同和路由配置时调用。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3815原文：https://www.fullstackrea...

harriszh 2019-08-20 18:35 评论0 收藏0
前端路由原理解析和实现

摘要：如何实现前端路由要实现前端路由，需要解决两个核心如何改变却不引起页面刷新如何检测变化了下面分别使用和两种实现方式回答上面的两个核心问题。原文链接：github.com/whinc/blog/… 在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本...

lavor 2019-05-23 16:28 评论0 收藏0
哈姆雷特之 React

摘要：最近两三周在主要在写，在这里写一下，算是个总结。但是打算换成，它是推荐用或，就这样决定把之前的换成了。这里面主要的问题是作用域。总之也并没有那么难。目前看来确实是非常适合于前后端分离的。最近两三周在主要在写 React，在这里写一下，算是个总结。 webpack 我们的后端语言用的是 Go, 对于写网站来说，Go 并没有好的前端资源（js, css，image）的管理方式(打包，压缩...

?xiaoxiao, 2019-08-19 18:10 评论0 收藏0
手把手教你用React实现一个简单的个人博客

摘要：官方文档中文文档基本使用注意一定要在根目录的中声明，要不然点击任何链接都无法跳转。官方文档中文文档简单的来说，每一次的修改状态都需要触发，然而其实项目中我现在还没用到修改数据。。。学习 React 的过程中实现了一个个人主页，没有复杂的实现和操作，适合入门 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 这个项目其实功能...

zhaochunqi 2019-08-21 16:49 评论0 收藏0