ReactJS - Router


Advertisements


In this chapter, we will learn how to set up routing for an app.

Step 1 - Install a React Router

A simple way to install the react-router is to run the following code snippet in the command prompt window.

C:\Users\username\Desktop\reactApp>npm install react-router

Configure the .babelrc file in the root of the project as shown below-

C:\Users\username\Desktop\reactApp>\type nul>.babelrc

Add the following code in .babelrc file

{
  "presets": ["es2015", "react"]
}

Create a file as index.html in a root directory and the following code -

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

To configure webpack.config.js file, add the following code in 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: 7777
   }
};

Step 2 - Add a Router

Now, we will add routes to the app. Instead of rendering App element like in the previous example, create a directory named as App and create files and named as main.js and App.js

Main.js

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

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

App.js

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

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={'/Login'}>Login</Link></li>
               </ul>
               <hr />
               
               <Switch>
                  <Route exact path='/' component={Home} />
                  <Route exact path='/Login' component={Login} />
               </Switch>
            </div>
         </Router>
      );
   }
}
export default App;

Step 3 - Create Components

In this step, we will create two components as (Home)and (Login) in App directory.

Home.js

import React, { Component } from 'react';

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

Login.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Login extends Component {
   render() {
      return (
         <div>
            <h2>Login</h2>
         </div>
      );
   }
}
export default Login;

When the app is started, we will see two clickable links that can be used to change the route.

React Router Example

Advertisements