Scribd
Upload
27 views7 pages

Lab 3

This document contains the solutions to exercises given as part of a React lab. The first exercise involves creating a simple React app with routing between Home and About pages. The second exercise implements nested routing with a parent and child components. Some post lab questions on dynamic and nested routing in React are also answered.

Uploaded by

siddarth sai you tube
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
27 views7 pages

Lab 3

This document contains the solutions to exercises given as part of a React lab. The first exercise involves creating a simple React app with routing between Home and About pages. The second exercise implements nested routing with a parent and child components. Some post lab questions on dynamic and nested routing in React are also answered.

Uploaded by

siddarth sai you tube
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/ 7

Lab-3

NAME: K BHAVANA
REG NO: 2200030550
lab:
Exercise 1:
Create a simple React application with two routes: Home and About.
Implement navigation links to switch between these routes using React Router.
Ans :
import React from 'react'; import { BrowserRouter as Router, Routes, Route,

Link } from 'react-router-dom'; import Home from './Home'; import About from

'./About';

const App = () => {

return (

<Router>

<div>

<nav>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About</Link>

</li>

</ul>

</nav>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

</Routes>
</div>

</Router>

);

};

export default App; outputs:

Exercise 2: Implement a nested routing structure in a React application using React Router.
Create a parent route and two child routes that are rendered within the parent component
Ans :
import React from 'react'; import { BrowserRouter as Router, Routes,

Route } from 'react-router-dom'; import Parent from './Parent'; import

Child1 from './Child1'; import Child2 from './Child2';

const App = () => {

return (

<Router>

<Routes>

<Route path="/" element={<Parent />}>

<Route path="child1" element={<Child1 />} />

<Route path="child2" element={<Child2 />} />

</Route>
</Routes>

</Router>

);

};

export default App;

import React from 'react'; import { Outlet

} from 'react-router-dom';

const Parent = () => {

return (

<div>

<h1>This is the Parent component</h1>

<Outlet />

</div>

);

};

export default Parent;

outputs:
Post lab :
Question 1: How can you create a dynamic route in React Router that accepts a parameter and
renders different content based on that parameter?

Ans :
// ProductDetail.js import React from 'react';

import { useParams } from 'react-router-

dom';

const ProductDetail = () => { let { productId } = useParams(); // Access

the parameter from the URL

return (

<div>

<h2>Product Details</h2>

<p>Product ID: {productId}</p>

{/* Render different content based on the productId parameter */}

</div>

);

};

export default ProductDetail;

// Product.js import React from 'react';

import { useParams } from 'react-router-

dom';
const Product = () => { let { id } = useParams(); // Access the

parameter from the URL

return (

<div>

<h2>Product Details</h2>

<p>Product ID: {id}</p>

{/* Render different content based on the id parameter */}

</div>

);

};

export default Product;

Question 2: How can you implement nested routes in React Router to create
a hierarchical navigation structure Ans :
import React from 'react'; import { BrowserRouter as Router, Routes,

Route } from 'react-router-dom'; import Home from './Home'; import

About from './About'; import Products from './Products'; import

ProductDetails from './ProductDetails';

const App = () => {

return (

<Router>

<Routes>

<Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/products">

<Route index element={<Products />} />


<Route path=":productId" element={<ProductDetails />} />

</Route>

</Routes>

</Router>

);

};

export default App;

// Home.js import React

from 'react';

const Home = () => {

return (

<div>

<h1>Welcome to the Home page!</h1>

</div>

);

};

export default Home;

// About.js import React

from 'react'; const About

= () => { return (

<div>

<h1>This is the About page!</h1>

</div>

);

};

export default About;

// ProductDetails.js import

React from 'react';


const ProductDetails = ({ productId }) => { //

Fetch product details using the provided ID

return (

<div>

<h1>Product Details for ID: {productId}</h1>

{/* ... display product information ... */}

</div>

);

};

export default ProductDetails;

You might also like