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;


13 comments:

  1. Thanks bro.. Love the way you explain things easily
    Please make a video on interview questions and how to crack them confidently

    ReplyDelete
  2. Thanks Vinod for your tutorials.Your tutorials are good.You explained complex content very well and easliy.

    ReplyDelete
  3. Good Work. I am really impress your technical videos and i started learn react with your videos. Thanks alot Thapa

    ReplyDelete
  4. Hello,

    I am using Reactjs but when I get data from API.MY API POST Method converted into OPTION Method ? Please help.

    ReplyDelete
  5. Picking a router that offers double band innovation is suggested - Although only one out of every odd gadget can exploit the 5GHz band.best router for streaming

    ReplyDelete
  6. Failed to compile
    ./src/App.js
    Module not found: Can't resolve 'react-router-dom' in 'D:\xampp\htdocs\reactrouter\src'
    This error occurred during the build time and cannot be dismissed.

    What to do now ?

    ReplyDelete
  7. Expected an assignment or function call and instead saw an expression no-unused-expressions
    this error is ocured, i add all component in App.js file plaese give me solution.

    ReplyDelete
  8. Awesome sirji, Apka samjane ka tarika bahot accha hai. apka video se bahat kuch sikhne mila thaks thapa sir.

    ReplyDelete
  9. Yaar Git link nahi hai kya !!! better hota

    ReplyDelete
  10. The simple task of sending and receiving emails would not be possible for so many users, without the use of the wireless modem router. It has helped to simplify the way we access the Internet within our homes and at our places of work. home router

    ReplyDelete
  11. A switch is intended to defeat, or factory out a territory in the outside of a bit of wood. This instrument, notwithstanding, isn't restricted to only one application. Truth be told, it is hard to figure out which application the switch is most ordinarily utilized for. jiofi.local.html

    ReplyDelete