[go: up one dir, main page]
Scribd
Upload
21 views3 pages

Week-1 Day 4 Navigation Menu

The document outlines the steps to create a navigation menu in a React JS application using react-router-dom. It includes code snippets for App.js, Navbar.js, and App.css, as well as instructions for setting up pages like Home, Menu, and Contact. The final structure allows for routing between these pages with a simple navigation bar.

Uploaded by

aarohisharmaa03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views3 pages

Week-1 Day 4 Navigation Menu

The document outlines the steps to create a navigation menu in a React JS application using react-router-dom. It includes code snippets for App.js, Navbar.js, and App.css, as well as instructions for setting up pages like Home, Menu, and Contact. The final structure allows for routing between these pages with a simple navigation bar.

Uploaded by

aarohisharmaa03
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Day3:

NAVIGATION MENU in REACT JS

STEPS:
1. src folder: App.js, Navbar.js and App.Css
2. On terminal, give command:
npm install react-router-dom

App.JS
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from
"react-router-dom";
import Home from "./pages/Home";
import Menu from "./pages/Menu";
import Contact from "./pages/Contact";
import Navbar from "./Navbar";

function App() {
return (
<div className="App">
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<h1> PAGE NOT FOUND</h1>} />
</Routes>
</Router>
</div>
);
}

export default App;

1
Navbar.js
import { Link } from "react-router-dom";
import './App.css'
function Navbar(){
return (

<div className='abc'>
<div>
<img src="logo.svg"/>

</div>
<div>
<Link className="xyz" to="/"> Home </Link>
<Link className="xyz" to="/menu"> Menu </Link>
<Link className="xyz" to="/contact"> Contact </Link>

</div>
</div>
);
};

export default Navbar;

App.css
.abc{
display:flex;
justify-content: space-between;

.xyz{
text-decoration: none;
margin: 10px;
}

2
Step: 4 - In src folder make:> pages folder :> Home.js , About.js and
Contact.js

Home.js
export default function Home () {
return <h1> THIS IS THE HOME PAGE</h1>;
};

export default function Menu(){


return <h1> THIS IS THE MENU PAGE</h1>;
};

Contact.js
export default function Contact()
{

return <h1> THIS IS THE CONTACT PAGE</h1>;


};

You might also like