THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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
pathname
– <Route>’s component prop specifies the corresponding view for the
location
– 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
• 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 = () =>{

return(
<div>
<nav className="navstyle">
<ul>
   <li> <Link to="">  Home </Link> </li>
   <li> <Link to="About"> About </Link> </li>
   <li> <Link to="Contact"> Contact  </Link> </li>
</ul>
</nav>
</div>
)



export default Menu;

Menu.css File Code


*{ margin: 0; padding: 0; }
.navstyle{
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 (
    <BrowserRouter>
    
      <Menu />  
      <switch>
       <Route path="/" exact component={Home} />
       <Route path="/about" component={About} />
       <Route path="/contact" component={Contact} />
       </switch>
    
    </BrowserRouter>
  );
}

const Home = () => {

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

}

export default App;