React Router is a powerful routing library built on top of the React library that allows you to create single-page applications (SPAs) with multiple views or pages. It is highly modular and customizable, allowing developers to create complex applications with various layouts and navigation structures.
To start using React Router, you first need to install it:
npm install react-router-dom
Below is an example illustrating basic usage of React Router.
Here’s the main component of your app where you define your routes.
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
Each component represents a view in your app. In this example, there are three simple components.
// Home Component
function Home() {
return <h2>Home</h2>;
}
// About Component
function About() {
return <h2>About Us</h2>;
}
// Contact Component
function Contact() {
return <h2>Contact Us</h2>;
}
export { Home, About, Contact };
React Router allows the creation of nested routes, enabling more complex user interfaces and layouts.
function Topics() {
return (
<div>
Topics
<ul>
<li>
<Link to="/topics/rendering">Rendering with React</Link>
</li>
<li>
<Link to="/topics/components">Components</Link>
</li>
<li>
<Link to="/topics/props-v-state">Props v. State</Link>
</li>
</ul>
<Route path="/topics/:topicId" component={Topic} />
</div>
);
}
function Topic({ match }) {
return <h2>Requested topic ID: {match.params.topicId}</h2>;
}
In React Router, you can configure your routes in an array to make your route definitions more manageable and to avoid redundancy.
const routes = [
{
path: "/",
component: Home
},
{
path: "/about",
component: About
},
{
path: "/contact",
component: Contact
}
];
// Then map over the routes array in your Router component
<Switch>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
component={route.component}
/>
))}
</Switch>
If you want to redirect the user to another route, you can use the `<Redirect>` component.
<Redirect to="/login" />
You can navigate to a different route programmatically using the `useHistory` hook.
function NavigationExample() {
let history = useHistory();
function handleNavigation() {
history.push("/new-location");
}
return (
<button onClick={handleNavigation}>
Navigate Programmatically
</button>
);
}
To handle route parameters, you can use the `useParams` hook to access the dynamic pieces of the URL.
function Topic() {
let { topicId } = useParams();
return <h2>Requested topic ID: {topicId}</h2>;
}
Let’s go through a more concrete example by creating a simple blog application using React Router. The application will have:
import {
BrowserRouter as Router,
Route,
Switch,
Link
} from 'react-router-dom';
// Define your components
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Post from './Post';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/post/:postId" component={Post} />
</Switch>
</Router>
);
}
import { useParams } from 'react-router-dom';
function Post() {
let { postId } = useParams();
// Fetch the post using the postId or render it according to your state management logic.
return <div>Rendering post with ID: {postId}</div>;
}
import { useHistory } from 'react-router-dom';
function PostSummary({ postId }) {
let history = useHistory();
function navigateToPost() {
history.push(`/post/${postId}`);
}
return <button onClick={navigateToPost}>Read More</button>;
}
React Router is a vital library for developing single-page applications using React. It provides a range of functionalities, including route definitions, nested routes, redirects, and programmatic navigation, enabling the development of more scalable and maintainable applications. With its ability to map URL paths to components, create links, and navigate between views, React Router can help you to structure your application in a user-friendly and efficient manner. By understanding and leveraging its capabilities, you can build more complex and interactive web applications with seamless user experiences.
This overview and examples should provide a strong foundation to start using React Router in your applications, allowing you to explore its advanced features and optimizations based on your application's needs. The examples listed here are basic and are meant to illustrate the concept; ensure to structure your application properly when building more extensive and complex applications.
UPCET Exam
Click Here
SAAT Exam
Click Here
MHT CET Exam
Click Here
IPU CET Exam
Click Here
KCET Exam
Click Here
COMEDK UG Exam
Click Here
VITEEE Exam
Click Here
BITSAT
Click Here
DSAT: Dayanand Sagar Admission Test
Click Here
Career In Animation in india
Click Here
Merchant Navy Courses in india
Click Here
Interior Design Career in india
Click Here
UGC NET Exam
Click Here
B. Ed Exam
Click Here
AFCAT - Air Force Common Admission Test
Click Here
GATE Exam
Click Here
Joint Entrance Examination (JEE)
Click Here
Common Admission Test (CAT)
Click Here
CDS - Combined Defence Services Exam
Click Here