react router dom - GeekyShows

Output Image :

Folder Image

App.js Code

// import { BrowserRouter, Routes, Route } from "react-router-dom";
// function App() {
//   return (
//     <>
//       <BrowserRouter>
//         <Routes>
//           <Route path="/" element={<h1> Hello React Router</h1>} />
//         </Routes>
//       </BrowserRouter>
//     </>
//   );
// }

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import Navbar from "./components/Navbar";
import Post from "./components/pages/Post";
import Dashboard from "./components/pages/Dashboard";
import Login from "./components/pages/Login";
import Logout from "./components/pages/Logout";

function App() {
  let isLogged = false;
  let data = {
    'st': 'User not logged in'
  }
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />z
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/post/:category" element={<Post />} />
          <Route path="/post/:category/:id" element={<Post />} />

          {/* <Route path="/dashboard" element={<Dashboard />} /> */}
          {/* <Route path="/dashboard" element={isLogged ? <Dashboard /> : <Login />} /> */}
          <Route path="/dashboard" element={!isLogged ? <Dashboard /> : <Navigate to="/login" replace state={data} />} />
          <Route path="/login" element={<Login />} />
          <Route path="/logout" element={<Logout />} />

          <Route path="*" element={<h1> Error: 404 Not Found </h1>} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

Navbar.js Code

import React from 'react'
import { Link, NavLink } from "react-router-dom";

const Navbar = () => {
    return (
        <>
            {/* <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul> */}

            <ul>
                <li><NavLink to="/" style={({ isActive }) => { return { backgroundColor: isActive ? "red" : "" } }}>Home</NavLink></li>
                <li><NavLink to="/about" style={({ isActive }) => { return { backgroundColor: isActive ? "blue" : "" } }}>About</NavLink></li>
                <li><NavLink to="/contact" style={({ isActive }) => { return { backgroundColor: isActive ? "green" : "" } }}>Contact</NavLink></li>
                <li><NavLink to="/post/mobile" style={({ isActive }) => { return { backgroundColor: isActive ? "orange" : "" } }} end>Post</NavLink></li>
                <li><NavLink to="/post/mobile/1" style={({ isActive }) => { return { backgroundColor: isActive ? "pink" : "" } }} end>Post with Id</NavLink></li>
            </ul>
        </>
    )
}

export default Navbar;

Home.js Code

import React from 'react'

const Home = () => {
    return (
        <>
            <h1> Home Page</h1>
        </>
    )
}

export default Home;

About.js Code

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

const Home = () => {
    let aksh = useNavigate();

    return (
        <>
            <h1> About Page</h1>
            <button onClick={() => {
                aksh(-1);
            }}>Click Me</button>
        </>
    )
}

export default Home

Contact.js Code

import React from 'react'

const Home = () => {
    return (
        <>
            <h1> Contact Page</h1>
        </>
    )
}

export default Home

Dashboard.js Code

import React from 'react'
import { useNavigate } from 'react-router-dom';

const Dashboard = () => {
    let navigate = useNavigate();
    let data = {
        "name": "Sonam"
    }
    return (
        <>
            <h1>DashBoard Page</h1>
            <button onClick={() => {
                navigate("/logout", { state: data });
            }}>Logout</button>
        </>
    )
}

export default Dashboard;

Login.js Code

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

const Login = () => {
    let loc = useLocation();
    console.log('aksh', loc)
    return (
        <>
            <h1>Login Page {loc.state.st} </h1>

        </>
    )
}

export default Login

logout.js Code

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

const Logout = () => {
    let loc = useLocation();
    return (
        <>
            <h1>Logout Page - {loc.state.name}</h1>
        </>
    )
}

export default Logout

Post.js Code

import React from 'react'
import { useParams, useSearchParams } from 'react-router-dom';

const Post = () => {
    const { category, id } = useParams();
    const [searchParams, setSearchParams] = useSearchParams();
    console.log('searchParams', searchParams.get('price'));
    console.log('searchParams', searchParams.get('sort'));
    console.log('searchParams',);
    // console.log('setSearchParams', setSearchParams);

    React.useEffect(() => {
        console.log('useeffect');
        setSearchParams({ "name": "aksh" })
    }, [])

    return (
        <>
            <h1>Post Page:- {category}:- {id}</h1>
        </>
    )
}

export default Post;

Thank You.
You can follow us on:
Youtube
Instagram