React Router Load On Demand

本文作者:IMWeb 陈映平 原文出处:IMWeb社区 未经同意,禁止转载

It is frequently asked that how to load components on demand if you use react with react-router.

In the official readme, there is a recommended loader named react-router-proxy-loader that can fullfill this need.

However, it depends on webpack and there are many cases where webpack is not included in the build task.

In fact, it is quite easy to achieve the same goal without webpack. Here is an example with little dependencies, and if you see example/jsx/loader.js, you will find that it is nearly the same as react-router-proxy-loader, except that you don't need to have webpack installed.

Some preparation

Checkout this repo by git clone or download the ziped file.

git clone https://github.com/chyingp/react-router-load-on-demand.git

Install react-tools to compile jsx to js

npm install -g react-tools

Run the example

Enter the example folder via command line

cd example

Then run jsx to compile jsx format file to normal js file.

jsx -w jsx js

Next start a mini server. (Thanks to https://gist.github.com/ryanflorence/701407)

node server.js

Finally, visits it in browser http://localhost:8888/

See the result: component was loaded on demand

You can see the beautiful page.

Only home.js was loaded at first view.

Click the about link

The about component was shown.

Only at this time, the about component was loaded on demand.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cloudskyme

虚拟化平台cloudstack(8)——从UI开始

UI ucloudstack采用的是前后端分离的架构,就是说前端可以选择使用web、swing甚至其它的界面,都可以。 我们来看cloudstack的UI信息吧...

39660
来自专栏FreeBuf

技术分享:MSSQL注入xp_cmdshell

存储过程为数据库提供了强大的功能,其类似UDF,在MSSQL中xp_cmdshell可谓臭名昭著了。MSSQL强大的存储过程也为黑客提供了遍历,在相应的权限下,...

53050
来自专栏乐沙弥的世界

Oracle RAC环境下如何更新patch(Rolling Patch)

    Oracle RAC数据库环境与单实例数据库环境有很多共性,也有很多异性。对于数据库补丁的更新同样如此,都可以通过opatch来完成。但RAC环境的补...

12210
来自专栏林德熙的博客

WPF 只允许打开一个实例

我们有时候只希望我们的程序只打开一个实例,也就是我们的软件只有一次被打开。 那么我们可以通过一个办法知道,在这个软件打开前是不是打开过一个,还没关闭。也就是是否...

21810
来自专栏程序员的酒和故事

libphonenumber--windows上编译libphonenumber.lib以及使用(C++、VS2015)

再介绍一个谷歌的,自带光环的库–libphonenumber. 虽然这个库是用c++写的,但是我们在网络上很少见到在C++开发中使用这个库,或是说在window...

571100
来自专栏Spring相关

Getway网关管理ZUUL

微服务架构体系中,通常一个业务系统会有很多的微服务,比如:OrderService、ProductService、UserService...,为了让调用更简单...

32040
来自专栏10km的专栏

linux下用cmake对caffe静态编译时-static-libstdc++参数无效的问题

以下是用于cmake 生成 Makefile文件对Caffe进行静态库连接编译的shell脚本, #!/bin/bash # cmake 静态编译 caffe-...

1K60
来自专栏Ryan Miao

gradle中使用嵌入式(embedded) tomcat, debug 启动

在gradle项目中使用embedded tomcat。 最开始部署项目需要手动将web项目打成war包,然后手动上传到tomcat的webapp下,然后启动t...

51190
来自专栏乐沙弥的世界

MySQL "Bind on TCP/IP port: Address already in use"

   最近在已部署MySQL Enterprise Monitor的服务器上新增了MySQL实例,导致MySQL Enterprise Monitor异常宕机...

12910
来自专栏小白安全

WinPayloads:一个可以绕过安全检查的Windowspayload生成器

今天给大家介绍的是一款名叫WinPayloads的Payload生成器,这款工具使用了metasploits meterpreter shellcode,它不...

31490

扫码关注云+社区

领取腾讯云代金券