Open In App
Related Articles

How is React Router is different from conventional routing ?

Improve Article
Save Article
Like Article

React Router is a library for routing in React applications. It allows you to create routes and link to them from your components. When a user clicks a link, React Router will determine which route to use and render the corresponding component.


Steps to Create the React Application And Installing Module:

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

npx create-react-app gfg

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

cd gfg

Step 3: Installing packages using the following command:

npm install react-router-dom

Project Structure:

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

"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",

React Router is Different from Conventional routing:

React Router, a declarative and modular library for React, simplifies routing by specifying route appearance rather than navigation details. Its modularity allows selective feature usage, enhancing efficiency. Additionally, React Router’s asynchronous nature supports on-demand loading of routes, promoting responsiveness, and its composable design enables the creation of intricate routes by combining multiple components.

Example: Now we are going to use React router to add routing in our app. For this, we will create a new ‘pages’ directory in our ‘src’  folder. Inside this newly created directory, we will create two JavaScript files ‘Home.js’ and ‘Data.js’ with the below content.


import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Data from "./pages/Data";
import Home from "./pages/Home";
export default function App() {
    return (
                <Route exact path="/" element={<Home />} />
                <Route path="/data" element={<Data />}>
ReactDOM.render(<App />, document.getElementById("root"));


import React from 'react'
import { Link } from "react-router-dom";
export default function Home() {
    return (
            <div>Home - GeeksforGeeks</div>
            <Link to="/data">Data</Link>


import React from 'react'
import { Link } from "react-router-dom";
export default function Data() {
    return (
            <Link to="/">Home</Link>

Steps to run the application: Use the below command in the terminal to start the application.

npm start


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 28 Nov, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials