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.
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
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/
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.
