Navbar
React.js
easy
25 mins
Create a simple React application with a navigation bar and two pages using React Router v6. The app should include:
- A
Navbarwith links to Home and About pages - Separate components for
HomeandAboutpages - Proper routing such that clicking a link changes the content shown without refreshing the page
Requirements:
-
Use React Router v6 Use
react-router-domto define and manage your routes. -
Navbar
-
Use the
NavLinkcomponent fromreact-router-dom. -
Should contain two links:
Home→ Navigates to/About→ Navigates to/about
-
-
Home Page (
Home.js)- Route:
/ - Content: Welcome to the Home Page
- Route:
-
About Page (
About.js)- Route:
/about - Content: Welcome to the About Page
- Route:
-
App Component (
App.js)- Should use
BrowserRouter,Routes, andRoutefromreact-router-dom. - Render
Navbarand showHomeorAboutbased on the current route.
- Should use
Reference UI

Preview what you need to build
Companies:
salesforce
Solve Similar questions 🔥
Want to upskill? Explore our courses!
Namaste DSA
Master DSA from scratch with numerous problems, and expert guidance.
Namaste React
Wanna dive deep into React and become Frontend Expert? Learn with me now!
Namaste Frontend System Design
The most comprehensive and detailed course for frontend system design.
Namaste Node.js
Wanna dive deep into Node.js? Enroll into `Namaste Node.js` now!
