Output 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;
Top comments (0)