Router in React

APP.JSX

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Navbar from './components/Navbar'

function App() {
const router =createBrowserRouter([
  {
    path:"/home",
    element:<div><Navbar/><Home/></div>
  },
  {
    path:"/About",
    element:<div><Navbar/><About/></div>
  },
])
  return (
    <>
    <RouterProvider router={router} />      
    </>
  )
}

export default App

Navbar.jsx

import React from 'react'
import { NavLink,Link } from 'react-router-dom'
import "./Navbar.css"

function Navbar() {

  return (
    <>
    <div>
    <ul>
        <li>
        <NavLink to="/Home" className={({isActive})=> isActive ? "active-link" : ""}>Homey</NavLink>
        </li>
        <li>
        <NavLink to="/About">About</NavLink>
        </li>
    </ul>
    </div>
    </>
  )
}

export default Navbar

Why we use Navlink

because it give us a function isActive to use which can be used to set a css if we want to get the active navbar color

Navbar.jsx

import React from 'react'
import { NavLink,Link } from 'react-router-dom'
import "./Navbar.css"

function Navbar() {

  return (
    <>
    <div>
    <ul>
        <li>
        <NavLink to="/Home" className={({isActive})=> isActive ? "active-link" : ""}>Homey</NavLink>
        </li>
        <li>
        <NavLink to="/About">About</NavLink>
        </li>
    </ul>
    </div>
    </>
  )
}

export default Navbar

Navbar.css

.active-link {
    border: 2px solid red;
}

Output


useParams

Main.jsx

const router = createBrowserRouter([
  {
    path:"/",
    element:<Home/>
  },
  {
    path:"/About",
    element:<About/>
  },
  {
    path:"/student/:id",
    element:<Paramsid/>
  }

])

Paramsid.jsx

import React from 'react'
import { useParams } from 'react-router-dom'

function Paramsid() {
    const {id} = useParams()
  return (
    <div>
        <h1>Paramsid {id}</h1>
    </div>
  )
}

export default Paramsid

output


Route PARAMETER

abcd/user/xjkns

Key PARAMETER

abcd/user/id=xjkns

Use navigation hook in button to use this with button


to make herircical routes like /student/courses

const router = createBrowserRouter([
  {
    path:"/",
    element:<Home/>
  },
  {
    path:"/About",
    element:<About/>,
    children:[
      {
        path:"courses",
        element:<Courses/>
      }
    ]
  },
  {
    path:"/student/:id",
    element:<Paramsid/>
  }

])

but for giving child routes we need to specify <outlet/> in the parent jsx file here:

import React from 'react'
import { Outlet } from 'react-router-dom'

function About() {
  return (
    <div>
        <h1>this is about page</h1>
        <Outlet/>
    </div>
  )
}

export default About