Scribd
Upload
19 views

WE Lab Assignment 2

The document describes using hooks and routing to build a landing page in React. It includes code for an App component that sets up routing between Home, About, Contact and NotFound pages. It also includes a Navigation component to display links between routes and a Styles CSS file.

Uploaded by

Aroosha Fatima
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
19 views

WE Lab Assignment 2

The document describes using hooks and routing to build a landing page in React. It includes code for an App component that sets up routing between Home, About, Contact and NotFound pages. It also includes a Navigation component to display links between routes and a Styles CSS file.

Uploaded by

Aroosha Fatima
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/ 6

University of Engineering and Technology Taxila

WE Lab Assignment 2

Submitted By:
21-SE-41 Syed Makhdoom Muhammad Mehdi
21-SE-69 Maryam Sarfaraz
21-SE-89 Abdur Rehman Zahid

Submitted to:

Mam Sidra Shafi

Subject:

Web Engineering

Date: 9-04-2024
Use of Hooks and Routing In a Landing Page

Codes:

//App.js
// App.js
import React from "react";
import {
BrowserRouter as Router,
Route,
Switch,
BrowserRouter,
Routes,
} from "react-router-dom";
import Navigation from "./Navigation";

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
function Home() {
return (
<div>
<Navigation />
<h2>Home Page</h2>
<p>Welcome to our website!</p>
</div>
);
}
function About() {
return (
<div>
<Navigation />

<h2>About Us</h2>
<p>We are a company dedicated to providing quality products.</p>
</div>
);
}
function Contact() {
return (
<div>
<Navigation />

<h2>Contact Us</h2>
<p>You can reach us at contact@example.com</p>
</div>
);
}
function NotFound() {
return (
<div>
<h2>404 - Page Not Found</h2>
<p>The page you are looking for does not exist.</p>
</div>
);
}

export default App;

//Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));


root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
//Navigation.js
// Navigation.js
import React from "react";
import { Link } from "react-router-dom";

function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}

export default Navigation;

//Styles.css
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

nav {
background-color: #333;
color: #fff;
padding: 10px;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

h2 {
margin-top: 20px;
}

Output:

//Image 1

//Image2
//Image 3

//Image 4

You might also like