Open In App

Route Component in React Router

React Router is a popular library used for managing routing in React applications. At its core lies the Route component, which plays a pivotal role in defining the relationship between URLs and corresponding components.

In this article, we’ll delve into the intricacies of the Route component, exploring its purpose, syntax, and practical usage.



What is the Route Component?

The Route component in React Router serves as a declarative way to render UI components based on the URL. It allows developers to specify which component to render when the application’s URL matches a certain path. Essentially, the Route acts as a bridge between the URL and the UI, enabling dynamic content rendering based on the user’s navigation.



Why Use the Route Component?

The Route component provides several key benefits:

Structure (Syntax) of Route Component

The syntax of the Route component is straightforward and follows a predefined structure:

<Route path="/example" element={<ExampleComponent/>} />

Breakdown of the Route Component in React Router:

Steps to Implement Route Component:

Step 1: Create react application with the help of following command.

npx create-react-app react-router
cd react-router

Step 2: Install the required dependencies.

npm i react-router-dom

Folder Structure:

Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example of Route Component

Code: Let’s consider a simple example to illustrate the usage of the Route component in React Router:




//App.js
 
import React from 'react';
import {
    BrowserRouter as Router,
    Route, Routes
} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
 
function App() {
    return (
        <Router>
            <div>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/contact" element={<Contact />} />
                    <Route path="*" element={<NotFound />} />
                </Routes>
            </div>
        </Router>
    );
}
 
export default App;




//Home.js
 
import React from 'react'
 
const Home = () => {
    return (
        <h1>Home</h1>
    )
}
 
export default Home




//About.js
 
import React from 'react'
 
const About = () => {
    return (
        <h1>About</h1>
    )
}
 
export default About




//Contact.js
 
import React from 'react'
 
const Contact = () => {
    return (
        <h1>Contact</h1>
    )
}
 
export default Contact




//NotFound.js
 
import React from 'react'
 
const NotFound = () => {
    return (
        <h1>NotFound</h1>
    )
}
 
export default NotFound

Output:

output

Explanation of Output:

Conclusion:

The Route component in React Router is a fundamental tool for managing routing in React applications. By providing a declarative approach to defining URL-based navigation, Route empowers developers to create dynamic and interactive user experiences. Understanding the syntax and usage of the Route component is essential for building robust and navigable React applications.


Article Tags :