AppDividend
Latest Code Tutorials

React Router: How to Setup Routing in React.js

React Router 4 Tutorial With Example

React.js is quite a famous library among the JavaScript developers. Routing to front-end application is a very important concept and today I am going to show you how to use react-router v4 in our React.js application. We will see Declarative React Routing for the React.js app. It is the just basic quick start of the react-router example.

Prerequisites

  1. ReactJS Tutorial For Beginners 2017 From Scratch

  2. Beginner’s Guide To Setup React V15.4.2 Environment

React Webpack setup

We are using a Webpack with React.js to set up the environment. Webpack is the module bundler for JavaScript applications.

Step 1: Make a package.json file.

Make one project folder and inside make one file called package.json and copy the following code to it.

{
  "name": "routingreactjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-3": "^6.22.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

It will install all the react.js project’s required dependencies.

Step 2: Configure webpack.config.js file.

Create one folder inside the root directory called app and in that make one file called main.js

The further step, make one file inside the root called webpack.config.js and copy the following code into it.

// webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};

So, we have configured the webpack, now in the root create one more file called index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Router Tutorial</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Here, I have included the bundle.js file in the index.html, which is the final output file of our application.

Configure the .babelrc file in the root of the project. And put the following code into it.

{
  "presets": ["es2015", "react", "stage-3"]
}

Step 3: Build a React.js component.

In the app directory, create one component file called App.js and put the following code into it.

// App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
          <h2>Welcome to React Router Tutorial</h2>
        </div>
    );
  }
}

export default App;

Now, in the main.js file, put the following into it.

// main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

The next step would type in the terminal the following command.

npm start

In the browser, go to this URL: http://localhost:3000/

Welcome to React Router Tutorial is displaying on the screen.

React Router Example

Step 4: Install the React Router module.

Type the following command in your terminal.

npm install --save-dev react-router-dom

The Router

There are two types of router object.

  1. <BrowserRouter>
  2. <HashRouter>

If we want to handle the dynamic request then use BrowserRouter and if we want to serve the static request then use HashRouter.

History

Every router creates a history object to keep track of the current location of the page.

Rendering a <Router>

If we take our above example then it will look like this.

// main.js

import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

This is how we can render the BrowserRouter object.

Step 5: Make two components.

First, make the Home.js component.

// Home.js

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
        <div>
          <h2>Home</h2>
        </div>
    );
  }
}

export default Home;

Now, make another component called Dashboard.js inside the app directory.

// Dashboard.js

import React, { Component } from 'react';

class Dashboard extends Component {
  render() {
    return (
        <div>
          <h2>Dashboard</h2>
        </div>
    );
  }
}

export default Dashboard;

The next step will be to modify the App.js file.

// App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';

class App extends Component {
  render() {
    return (
    <Router>
        <div>
          <h2>Welcome to React Router Tutorial</h2>
          <ul>
            <li><Link to={'/'}>Home</Link></li>
            <li><Link to={'/dashboard'}>Dashboard</Link></li>
          </ul>
          <hr />
          <Switch>
              <Route exact path='/' component={Home} />
              <Route path='/dashboard' component={Dashboard} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

The final main.js file will look like this.

// main.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(
  <App />, document.getElementById('app'));

Go to the URL: http://localhost:3000

Finally, our react-router version 4 example is over.

Fork Me On Github

1 Comment
  1. Joko says

    Every your tutorial is amazing, it’s very helpful for me
    Thank you so much!!!

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.