react-router-dom v6 step by step

 


import Blog from "./Pages/Blog";
import Contact from "./Pages/Contact";
import About from "./Pages/About";
import Error from "./Pages/Error";
import Home from "./Pages/Home";
import Login from "./Pages/Login";
import Register from "./Pages/Register";

 const router = [
    {
        id:1,
        name:"home",
        pathname:"/",
        component:<Home/>
    },
    {
        id:2,
        name:"about",
        pathname:"/about",
        component:<About/>
    },
    {
        id:2,
        name:"blog",
        pathname:"/blog",
        component:<Blog/>
    },
   
    {
        id:4,
        name:"login",
        pathname:"/login",
        component:<Login/>
    },
    {
        id:5,
        name:"register",
        pathname:"/register",
        component:<Register/>
    },
    {
        id:6,
        name:"contact",
        pathname:"/contact",
        component:<Contact/>
    },
    {
        id:7,
        name:"*",
        pathname:"*",
        component:<Error/>
    },
]
export default router

Setup 2

import { Routes, Route} from 'react-router-dom'
import Navigation from './component/Navigation';
import Home from "./Pages/Home";

function App() {
  return (
    <div>
       <Navigation/>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
 
    </div>
  )
}

export default App

Setup 3


import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import {GiHamburgerMenu} from 'react-icons/gi'
import {AiOutlineClose} from 'react-icons/ai'
import './index.css'
const Navigation = () => {
    const[mobile,setMobile] =useState(false)
    const ToggleButton =()=>{
        mobile?setMobile(false):setMobile(true)
    }
    const data = [{
        name:"Home",
        path:"/home"
    },
    {
        name:"About",
        path:"/about"
    },
    {
        name:"Destinations",
        path:"/destination"
    },
    {
        name:"Pages",
        path:"/page"
    },
    {
        name:"Contact Us",
        path:"/contact"
    }
]
  return (
   <>
     <nav className={mobile?'navLink-mobile-open':'navLink-mobile-close'}>
     <ul className='link-mobile'>
     {data.map((ele,id)=>(
         <li key={id}><NavLink to={ele.path}>{ele.name}</NavLink></li>
     ))}
     </ul>
   
  </nav>
    <div className='Navbar'>
    <div className='logo'>Tourism</div>
     <nav className='navLink'>
        {data.map((ele)=>(
            <NavLink to={ele.path}>{ele.name}</NavLink>
        ))}
     </nav>
   
     <div className='toggler' onClick={ToggleButton}>
       {mobile?<AiOutlineClose className='togg-icon' />:<GiHamburgerMenu className='togg-icon'/>}
     </div>
    </div>
   
   </>
  )
}

export default Navigation



Setup 4 index.css


.active{
    color: aqua !important;
}
.logo{
    font-size: 25px;
    font-weight: bold;
}
.togg-icon{
    font-size: 25px;
}
.Navbar{
    display: flex;
    justify-content: space-between;
    background-color:#222222;
    color: aliceblue;
    padding-top: 20px;
    padding-bottom: 20px;
    padding: 20px;
}
.navLink a{
    padding: 15px 20px;
    text-decoration: none;
    color: aliceblue;
}
.toggler{
    display: none;
}
.navLink-mobile-open{
    display: none;
}
.navLink-mobile-close{
    display: none;
}
@media screen and (max-width: 600px) {
  .navLink{
    display: none;
  }
  .Navbar{
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  .toggler{
    display: block;
  }
  .navLink-mobile-open{
    z-index: -1;
    position:absolute;
    transition: ease-in-out 0.5s;
    top: 74px;
    width: 100%;
    display: block;
    background-color: #222222;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20p;
  }
  .navLink-mobile-close{
    z-index: -1;
    position:absolute;
    transition: ease-in-out 0.5s;
    top: -145px;
    width: 100%;
    display: block;
    background-color: #222222;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20p;
  }
  .navLink-mobile-close .link-mobile{
    padding-top: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
  }
  .navLink-mobile-open .link-mobile{
    padding-top: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 20px;
  }
  .navLink-mobile-open .link-mobile li a{
    text-decoration: none;
    color: aliceblue;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .navLink-mobile-close .link-mobile li a{
    text-decoration: none;
    color: aliceblue;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  }








Post a Comment

Previous Post Next Post