Routing using react-router module -Tutorial Savvy

ReactJS

ReactJS is an library to develop view part of a SPA – single page application.ReactJS does not provide any routing mechanism by default.We can use react-router NPM module to implement Routing in a application.
The react-router NPM module can be found from following link:-

https://www.npmjs.com/package/react-router

In this demo, “We will learn to use react-router module to implement routing in ReactJS application”.
To demonstrate react-router module we have created a ReactRouterDemo project.The following screenshot shows the directory structure of ReactRouterDemo project: –

We need to install react,react-dom,browserify,babelify,babel-preset-react and babel-preset-es2015 development dependencies for this demo.The following table describes the purpose of each NPM module:-

The react library can be installed using npm install –save react command.The following screenshot shows the terminal with ReactJS installation:-

The react-dom library can be installed using npm install –save react-dom command.The following screenshot shows the terminal with react-dom installation:-

The browserify library can be installed using npm install –save-dev browserify command.The following screenshot shows the terminal with browserify installation:-

The babelify library can be installed using npm install –save-dev babelify command.The following screenshot shows the terminal with babelify installation:-

The babel-preset-react library can be installed using npm install –save-dev babel-preset-react command.The following screenshot shows the terminal with babel-preset-react installation:-

The babel-preset-es2015 library can be installed using npm install –save-dev babel-preset-es2015 command.The following screenshot shows the terminal with babel-preset-es2015 installation:-

The react-router library can be installed using npm install –save react-router command.The following screenshot shows the terminal with react-router installation:-

The home.js file contains the following code:-

import React from "react";

let Home = React.createClass({
    render() {
        return(<h1>Welcome to Home Page!!!</h1>);
    }
});

export default Home;

The about.js file contains the following code:-

import React from "react";
let About = React.createClass({
    render() {
        return(<h1>Welcome to About Page!!!</h1>);
    }
});
export default About;

The contact.js file contains the following code:-

import React from "react";

let Contact = React.createClass({
    render() {
        return(<h1>Welcome to Contact Page!!!</h1>);
    }
});

export default Contact;

The router.js file contains the code to define application routing.The following code shows the contains the code for router.js file:-

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router';
import Home from './page/home.js';
import About from './page/about.js';
import Contact from './page/contact.js';

let App = React.createClass({
    render() {
        return (
            <div className="my-app">
                <div className="my-menu">
                    <Link to="/home">home </Link><br/>
                    <Link to="/about">About </Link><br/>
                    <Link to="/contact">Contact </Link>
                </div>
                <div className="my-page-view">
                 {this.props.children}
                </div>
            </div>
        );
    }
});

let routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="home" component={Home} />
            <Route path="about" component={About} />
            <Route path="contact" component={Contact} />
        </Route>
    </Router>
);
ReactDOM.render((routes), document.getElementById("myApp"))

Use following command to generate bundled code by transpiling ReactJS using browserify:-

browserify -t [babelify –presets [react es2015] ] dev/router.js -o build/bundle.js

The index.html file contains the following code:-

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>React router Example</title>
</head>
<body>
    <section id="myApp"></section>
    <script src="build/bundle.js"></script>
</body>
</html>