React useContext + useNavigate Scenarios

1. Login Scenario

Problem

User enters name in Login page and moves to Dashboard page.
Dashboard should display the username.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

export const UserContext = createContext();

function App() {

  const [user, setUser] = useState("");

  return (

    <UserContext.Provider value={{ user, setUser }}>

      <BrowserRouter>

        <Routes>

          <Route path="/" element={<Login />} />

          <Route
            path="/dashboard"
            element={<Dashboard />}
          />

        </Routes>

      </BrowserRouter>

    </UserContext.Provider>

  );
}

export default App;

Login.jsx

import React, { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Login() {

  const [name, setName] = useState("");

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogin = () => {
    setUser(name);
    navigate("/dashboard");
  };

  return (
    <div>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
        Login
      </button>

    </div>
  );
}

export default Login;

Dashboard.jsx

import React, { useContext } from "react";

import { UserContext } from "../App";

function Dashboard() {

  const { user } = useContext(UserContext);

  return (

    <div>

      <h1>Dashboard</h1>

      <h2>Welcome {user}</h2>

    </div>

  );
}

export default Dashboard;

2. Logout Scenario

Problem

User clicks Logout button and should return to Login page.
Stored user data should also be cleared.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState("");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

Login.jsx

import React, { useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Login() {
  const [name, setName] = useState("");

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogin = () => {
    setUser(name);
    navigate("/dashboard");
  };

  return (
    <div>
      <h1>Login</h1>

      <input
        type="text"
        placeholder="Enter Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

Dashboard.jsx

import React, { useContext } from "react";
import { useNavigate } from "react-router-dom";
import { UserContext } from "../App";

function Dashboard() {

  const { setUser } = useContext(UserContext);

  const navigate = useNavigate();

  const handleLogout = () => {
    setUser("");
    navigate("/");
  };

  return (
    <div>

      <button onClick={handleLogout}>
        Logout
      </button>

    </div>
  );
}

export default Dashboard;

3. Name Sharing Scenario

Problem

User enters name in Home page.
Profile page should display the same name.

App.jsx

import React, { createContext, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import Profile from "./components/Profile";

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState("");

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

Home.jsx

import React, { useContext } from "react";
import { UserContext } from "../App";

function Home() {

  const { user, setUser } = useContext(UserContext);

  return (
    <div>

      <input

        type="text"
        value={user}
        onChange={(e) => setUser(e.target.value)}
      />

    </div>
  );
}

export default Home;

Profile.jsx

import React, { useContext } from "react";
import { UserContext } from "../App";

function Profile() {

  const { user } = useContext(UserContext);

  return (
    <div>
      <h1>{user}</h1>
    </div>
  );
}

export default Profile;

4. Button Navigation Scenario

Problem

User clicks Next button in Home page and About page should open.

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import About from "./components/About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.jsx

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

function Home() {

  const navigate = useNavigate();

  return (
    <div>

      <button onClick={() => navigate("/about")}>
        Next
      </button>

    </div>
  );
}

export default Home;

About.jsx

import React from "react";

function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
}

export default About;

5. Back Navigation Scenario

Problem

User opens Details page and clicks Back button to return previous page.

App.jsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "./components/Home";
import Details from "./components/Details";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/details" element={<Details />} />
      </Routes>
    </BrowserRouter>
  );
}

jsx
import React from "react";
import { useNavigate } from "react-router-dom";

function Home() {
const navigate = useNavigate();

return (

Home Page

  <button onClick={() => navigate("/details")}>
    Go To Details
  </button>
</div>

);
}

export default Home;

export default App;

jsx

Home.jsx

Details.jsx

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

function Details() {

  const navigate = useNavigate();

  return (
    <div>

      <button onClick={() => navigate(-1)}>
        Back
      </button>

    </div>
  );
}

export default Details;