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;