React Router Tutorial in One Video in Hindi

React Router Tutorial in One Video in Hindi 

React Router
• Collection of navigational components
– Enables navigation among views
– Router components, route matching components and
navigation components
• Uses browser-based bookmarkable URLs as an instruction
to navigate to a client-generated view in your web app
– Can also pass along optional parameters

Web App Routing
• Install react-router-dom
• Router component: <BrowserRouter>
– Creates specialized history object
– Also <HashRouter> if you are using a static file server
– Enclose your app in BrowserRouter

Route Matching
• Route matching components: <Route> and <Switch>
– <Route>’s path prop enables specification of the current location’s
– <Route>’s component prop specifies the corresponding view for the
– Using exact attribute ensures that the path must be exactly matched
– <Redirect> enables the default route specification
– <Switch> enables grouping together several routes
• Will iterate over all its children and find the first one that matches the path

• Navigation is supported through the <Link>
and <NavLink> components:
– <Link> creates links in your application
• Will render as <a> in the HTML
– <NavLink> also attaches the active class to the link
when its prop matches the current location

Menu.js Component Code

import React from 'react';
import './Menu.css';

import { Link } from 'react-router-dom';

const Menu = () =>{

<nav className="navstyle">
   <li> <Link to="">  Home </Link> </li>
   <li> <Link to="About"> About </Link> </li>
   <li> <Link to="Contact"> Contact  </Link> </li>

export default Menu;

Menu.css File Code

*{ margin: 0; padding: 0; }
width: 100%; height: 100px; background: #6ab04c; color: white;

.navstyle ul {
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;

.navstyle ul li{
list-style: none;
text-transform: uppercase;
color: white;

.navstyle ul li a{
color: white;

App.js Component Code 

import React from 'react';
import './App.css';
import './Home.css';
import About from './About';
import Menu from './Menu';
import Contact from './Contact';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
      <Menu />  
       <Route path="/" exact component={Home} />
       <Route path="/about" component={About} />
       <Route path="/contact" component={Contact} />

const Home = () => {

  return (
     <div className="homestyle"> 
        <h2> This is the Home Page. </h2>


export default App;