How to install React Router and use it on React
Tags: react, reactrouter, installreact
Published: 2020-10-14 14:38:24

Today you will learn about the React Router and at we will implement React Router on our project.
## Table Of Contents
* 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'))
```