What is React Router?

React Router is like a traffic controller for your React application. Just like how a traffic controller directs vehicles on roads, React Router directs users to different parts of your app based on the URL they visit. So, when you click on a link or type a URL in your browser, React Router decides which part of your React app to show, making it easy to create seamless and interactive single-page applications.

Key Features of React Router:

• Declarative Routing: Set up navigation using a declarative syntax, making it easy to define routes clearly and intuitively.
• Component-Based: Routes are associated with React components, allowing each route to render a specific component when navigated.
• Nested Routing: Supports nested routes, enabling the creation of complex page structures with subcomponents and layouts.
• Dynamic Routing: Allows for dynamic route parameters, enabling the creation of flexible and parameterized routes.
• Programmatic Navigation: Enables navigation via JavaScript code, facilitating redirections and transitions based on user interactions or application logic.

Steps to Create React App and Installing React Router:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: Install React Router package.

npm install react-router-dom

Project Structure:

Example Code: Write the following code in the respective files.

• App.js: This file implements Routing
• Home.js: This file contains the Home Component used in Routing
• About.js: This file contains the About Component used in Routing

Javascript

// App.js
import React from 'react';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
} from 'react-router-dom';
import Home from './Home';
import About from './About';

function 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;

Javascript

// Home.js
import React from 'react'

const Home = () => {
    return (
        <div>Home</div>
    )
}

export default Home

Javascript

// About.js
import React from 'react'

const About = () => {
    return (
        <div>About</div>
    )
}

export default About

Start your application using the following command.

npm start

Output:

Routing to Different Components