In this video we are going to learn about Router.
React enables the navigation among views of various components in a React Application,
It allows changing the browser URL and keeps the UI in sync with the URL.
React app actually made up of a single page, they just look like multiple pages.
Because they contain components which render like separate pages.
These are usually referred to as single-page applications.
At its core, what React Router does is conditionally render certain components to display depending on the route being used in the URL.
Let see how can we use router in react.
So switch to project.
This is new project of react now install react-router-dom.
So for that switch to the command prompt and run the command.


npm install react-router-dom


Now its installing the router library.
Alright react-router-dom has been installed.
Now switch to project and inside the project.
Just click on src and inside the src folder just create a folder.
Lets say folder name is components.
Now here lets create some components.
Lets create there components first is Home.js second is About.js and third is Contact.js.
Now open Home.js component and write the following code.


import React, { Component } from 'react'

class Home extends Component {
render() {
return (
<div>
<h1>Home Page</h1>
</div>
)
}
}

export default Home;


Now open the About Component and add the following code.

import React, { Component } from 'react'

class About extends Component {
render() {
return (
<div>
<h1>About Us Page</h1>
</div>
)
}
}

export default About;


Now open contact component and write the following code.

import React, { Component } from 'react'

class Contact extends Component {
render() {
return (
<div>
<h1>Contact Us Page</h1>
</div>
)
}
}

export default Contact;


Now go to the App.js and here first of all import BrowserRouter, Route and Switch.
And also import Home,About and Contact Component.

import {BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';


Now inside the App Component return just add the following code.


<BrowserRouter>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</BrowserRouter>


Now add the navigation bar so go to getbootstrap.com and just click on get started.
Now copy this css cdn and paste inside the head of public/index.html file.

Alright now create one more component for the navigation.
So just right click on components folder and create new file.
Lets say file name is Navbar.js.
Now open this file and add the following code.

import React, { Component } from 'react'

class Navbar extends Component {
render() {
return (
<div>
<nav className=\"navbar navbar-expand-lg navbar-light bg-light\">
<a className=\"navbar-brand\" href=\"#\">Navbar</a>
<button className=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNav\" aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
<span className=\"navbar-toggler-icon\" />
</button>
<div className=\"collapse navbar-collapse\" id=\"navbarNav\">
<ul className=\"navbar-nav\">
<li className=\"nav-item active\">
<a className=\"nav-link\" href=\"/\">Home </a>
</li>
<li className=\"nav-item\">
<a className=\"nav-link\" href=\"/about\">About</a>
</li>
<li className=\"nav-item\">
<a className=\"nav-link\" href=\"/contact\">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
)
}
}

export default Navbar;


Now go to the App.js and here lets import the Navbar Component.


import Navbar from './components/Navbar';


Now add Navbar before the Switch

<BrowserRouter>
<Navbar>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
</Switch>
</BrowserRouter>


Now its done so lets check it.
Switch to the browser and here you can see the navbar and home page.
If i click on about link you can see the about page and if I click on contact link you can see the coatact page.
So in this way can use Router in react.