React Router

React Router

React Router(react-router) is routing control library for React.
This is similar with Angular Router. Basically, this is for Single page application.


This example is React Router basic usage and works with webpack.

Install dependencies

npm init
npm install react react-dom react-router --save
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
npm install webpack webpack-dev-server --save-dev

Prepare babel common setting as .babelrc

  'presets': ['react', 'es2015']

For webpack, we need webpack.config.js for how to build

module.exports = {
    entry: './js/index.jsx',
    output: {
        path: './dist',
        filename: 'bundle.js'
    devServer: {
        historyApiFallback: true
    devtool: 'inline-source-map',  /* source map */
    module: {
        loaders: [
                test: /\.jsx$/, // Target files
                exclude: /node_modules/, // excludes
                loader: 'babel-loader'

Preparation was done, next is source codes


This is project structure

|- package.json
|- webpack.config.js
|- js
    |- about.jsx
    |- index.jsx
    |- next.jsx


<!doctype html>
    <meta charset="utf-8">
    <title>React and Webpack</title>

<div id="content"></div>
<script src="dist/bundle.js"></script>



import React from 'react';

export class About extends React.Component {
    render() {
        return (


import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import { About } from './about.jsx';
import { Next } from './next.jsx';

class App extends React.Component {
    render() {
        return (
            <div><h3>Hello React and Webpack(React Router)!</h3>

class Routers extends React.Component {
    render() {
        return(<Router history={browserHistory}>
            <Route path="/" component={App}>
                <Route path="/next" component={Next}></Route>
            <Route path="/about" component={About}></Route>

    <Routers />,

index is entry javascript. This has router setting and import component
Router route is /
And cover /next, and /about. /next is under /


import React from 'react';

export class Next extends React.Component {
    render() {
        return (

Let’s build and run dev-server


Build bundle.js under dist

Start dev server

webpack-dev-server --hot --progress --colors

You can access localhost:8080 localhost:8080/about localhost:8080/next