React Router

Posted by On 12月 30, 2016 0 Comment

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.

Example

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

Project

This is project structure

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

index.html

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

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

</html>

about.jsx

import React from 'react';

export class About extends React.Component {
    render() {
        return (
            <div>About</div>
        );
    }
}

index.jsx

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>
                <div>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

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


ReactDOM.render(
    <Routers />,
    document.getElementById("content")
);

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

next.jsx

import React from 'react';

export class Next extends React.Component {
    render() {
        return (
            <div>Next</div>
        );
    }
}

Let’s build and run dev-server
Build

webpack

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

TOPICS