How to install React Router and use it on React

Mehadi Hasan — Wed, 14 Oct 2020 14:38:24 +0000

Today you will learn about the React Router and at we will implement React Router on our project.

What is React Router?
Creating New Project
How to install the React Router?
Routing

What is React Router

React Router is a routing library which is used to create routing in React app. After the v4 the React Router works dynamically, previously it was static.

Creating New Project

npx create-react-app react-route
cd react-route

How to install the React Router?

Run the below command to download react-router-dom package.

npm install react-router-dom //download and install the package
npm start  //start development server

Routing

After starting the server you can view the app from http://localhost:3000. Open the project in your favorite editor and navigate to public/index.html. Here is the updated code of index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title>React Router Example</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>

Now we have to create component for our app. Create a folder under src named components. Create three file Navbar.js, About.js, Contact.js

Edit Navbar.js and paste this code

import React from 'react'
import {Link} from 'react-router-dom';
class About extends React.Component {
    render() {
        return <div
            className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
            <h5 className="my-0 mr-md-auto font-weight-normal"><Link className="p-2 text-dark" to="/">React Router Example</Link></h5>
            <nav className="my-2 my-md-0 mr-md-3">
                <Link className="p-2 text-dark" to="/about">About</Link>
                <Link className="p-2 text-dark" to="/contact">Contact</Link>
            </nav>
        </div>
    }
}
export default About

Edit About.js and paste this code

import React from 'react'
class About extends React.Component {
    render() {
        return <div className="card">
            <div className="card-header">
                About
            </div>
            <div className="card-body">
               <p>
                   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
               </p>
            </div>
        </div>
    }
}
export default About

Edit Contact.js and paste this code

import React from 'react'
class Contact extends React.Component {
    render() {
        return <div className="card">
            <div className="card-header">
                Contact
            </div>
            <div className="card-body">
                <form>
                    <div className="form-group">
                        <label >Name</label>
                        <input type="text" className="form-control"
                               placeholder="Enter name"/>
                    </div>

                    <div className="form-group">
                        <label >Message</label>
                        <textarea className="form-control" id="message" name="message"
                                  placeholder="Please enter your message here..." rows="5"/>
                    </div>


                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    }
}
export default Contact

Now open App.js and paste these code

import React from 'react'
import {Link} from 'react-router-dom';
class App extends React.Component {
  render() {
    return (
        <div className="card">
            <div className="card-header">
                Homepage
            </div>
            <div className="card-body">
                <h1>Weclome to Homepage! Content shoing from App.js</h1>
            </div>
        </div>
    )
  }
}
export default App

Now we at at last part of our tutorial open index.js and update the code.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link,Switch, BrowserRouter as Router } from 'react-router-dom'
import App from './App';
import NavBar from './components/Navbar'
import Contact from './components/Contact';
import About from './components/About';
const routing = (
    <Router>
        <div>

            <NavBar/>

            <section className="container">
                <Switch>
                    <Route exact path="/" component={App} />
                    <Route exact path="/about" component={About} />
                    <Route exact path="/contact" component={Contact} />
                </Switch>
            </section>

        </div>
    </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

DEV Community: Mehadi Hasan

How to install React Router and use it on React

Table Of Contents

What is React Router

Creating New Project

How to install the React Router?

Routing