Output Image :
App.js Code
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import Post from "./components/pages/Post";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./components/Layout";
import PostLayout from "./components/PostLayout";
import PostDetail from "./components/pages/PostDetail";
const App = () => {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
{/* <Route path="post" element={<Post />} /> */}
<Route path="post" element={<PostLayout />} >
<Route path=':category' element={<PostDetail />} />
<Route index element={<Post />} />
</Route>
{/* <Route path="/" element={<Home />} /> */}
<Route index element={<Home />} />
</Route>
<Route path="*" element={<h1> Error: Not Found </h1>} />
</Routes>
</BrowserRouter>
</>
)
}
export default App;
Layout.js Code
import React from 'react'
import { NavLink, Outlet } from "react-router-dom";
const Layout = () => {
return (
<>
<h1>React Router v6</h1>
<ul>
<li><NavLink to="/" style={({ isActive }) => { return { backgroundColor: isActive ? "red" : "" } }}>Home</NavLink></li>
<li><NavLink to="/about" style={({ isActive }) => { return { backgroundColor: isActive ? "green" : "" } }}>About</NavLink></li>
<li><NavLink to="/contact" style={({ isActive }) => { return { backgroundColor: isActive ? "orange" : "" } }}>Contact</NavLink></li>
<li><NavLink to="/post" style={({ isActive }) => { return { backgroundColor: isActive ? "pink" : "" } }}>Post</NavLink></li>
</ul>
<Outlet />
</>
)
}
export default Layout
PostLayout.js Code
import React from 'react'
import { Outlet } from "react-router-dom";
const PostLayout = () => {
return (
<>
<h1>PostLayout</h1>
<Outlet />
</>
)
}
export default PostLayout
About.js Code
import React from 'react'
import { Outlet } from "react-router-dom";
const About = () => {
return (
<>
<h1>About Page</h1>
<Outlet />
</>
)
}
export default About
Contact.js Code
import React from 'react'
const Contact = () => {
return (
<>
<h1>Contact Page</h1>
</>
)
}
export default Contact
Home.js Code
import React from 'react'
const Home = () => {
return (
<>
<h1>Home Page</h1>
</>
)
}
export default Home
Post.js Code
import React from 'react'
const Post = () => {
return (
<>
<h1>Post Page</h1>
</>
)
}
export default Post
PostDetail.js Code
import React from 'react'
import { useParams } from "react-router-dom";
const PostDetail = () => {
const { category } = useParams();
return (
<>
<h1>PostDetail - {category}</h1>
</>
)
}
export default PostDetail
Top comments (0)