React_js_routing

 without reload page load

install:npm i react-router-dom

Everytime when state update component re-render..

https://reactrouter.com/web/guides/quick-start

link and Navlink[can apply css]

exact is exact match [exact path]

switch:-switch to particular route only while error component making.

{/* A <Switch> looks through its children <Route>s and

renders the first one that matches the current URL. */}

Dynamic:-

/post/:cat

in post.js :--

import React from 'react'

import { useParams } from 'react-router'

export default function About() {

    let {cat}=useParams();

  return (

    <div>About page{cat}</div>

  )

}

App.js:--- import Nav from './Components/Nav'; import Home from './Components/Home'; import About from './Components/About'; import Contact from './Components/Contact'; import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; function App() { return ( < > <Router> <Nav></Nav>

<Routes> <Route path='/' element={<Home/>} exact></Route> <Route path='/About' element={<About/>} exact></Route> <Route path='/Contact' element={<Contact />} exact></Route> </Routes> </Router> ................................ Nav.js: import React from 'react'; import { Link } from 'react-router-dom' export default function Nav() { return ( <><nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> </> ) } //.................................. import React from 'react'; import { NavLink } from 'react-router-dom' export default function Nav() { return ( <><nav> <ul> <li> <NavLink to="/" activeClassName="active" > Home </NavLink> </li> <li> <NavLink to="/About" activeClassName="active" > About </NavLink> </li> <li> <NavLink to="/Contact" activeClassName="active" > Contact </NavLink> </li> </ul> </nav> </> ) } index.css:-- a.active { color: red; text-decoration: none; font-size: 20px; } a:hover{ background-color: aqua; } Error Page: import Error from './Components/Error'; import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; function App() { return ( < > <Router> <Nav></Nav> <Routes> <Route path='/' element={<Home/>}></Route> <Route path='/About' element={<About/>}></Route> <Route path='/Contact' element={<Contact />}></Route> <Route path="*" element={<Error/>}></Route> </Routes> </Router> 1...

nested routing

app.js

<Route path='about' element={<About/>} >

    <Route path='html' element={<Html/>} />

    <Route path='Css' element={<Css/>}  /> }>  

    </Route> 

2....

about.js

<div>

   <Link to='/about/Html'>Html</Link>

  <Link to='/about/Css'>css</Link>

   </div>

  <Outlet/>

reactjs - NavLink exact prop not working for react-router-dom 6 - Stack Overflow

Exact param will no longer working on NavLink component. In version 6 Beta they have included a new param called: end

With this simply approach you just need to pass end param for your NavLink component and exact to you Route

<NavLink end to="/">
      Go to Home
    </NavLink>

route gurad