Scribd
Upload
8 views3 pages

React Router for Dynamic Navigation

React Router is a library for managing dynamic routes and navigation in React applications, enhancing user experience in single-page applications. The document includes installation instructions and code examples for setting up routes to components like Home, About, and Contact. It demonstrates how to implement navigation using React Router in an App component.

Uploaded by

yashmca2025100
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
8 views3 pages

React Router for Dynamic Navigation

React Router is a library for managing dynamic routes and navigation in React applications, enhancing user experience in single-page applications. The document includes installation instructions and code examples for setting up routes to components like Home, About, and Contact. It demonstrates how to implement navigation using React Router in an App component.

Uploaded by

yashmca2025100
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

React Router is a standard library for creating dynamic routes and navigation in

React JS Applications. It allows you to create dynamic routes providing a


seamless user experience by mapping various URLs to components.
It enables navigation in single-page application (SPA) without refreshing
the entire page

npm install react-router-dom

folder in components [Link], [Link], [Link]

About

import React from "react";

const About = () => {


return <h1>About Us</h1>;
};

export default About;

Contact

import React from "react";

const Contact = () => {


return <h1>Contact Us</h1>;
};

export default Contact;


Home

import React from "react";


const Home = () => {
return <h1>Welcome to the Home Page</h1>;
};

export default Home;

[Link]

import React from "react";


import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";

const App = () => {


return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
};
export default App;

You might also like