How to create ReactJS Routing – Setup and Basic Example (React Router) | Your complete guide to routing in React

You need a method to switch between several components or pages in ReactJS multi-page apps without having to restart the entire browser. React Router is useful in this situation. The default routing library for React is called React Router. It enables you to manage dynamic URLs, perform navigation, and specify numerous routes—all within a single-page application (SPA).

In this tutorial, we’ll cover:

🔑 Key Concepts:

How to install React Router
Set up basic routes
Navigate between pages using links
Render components based on the route path

React Router makes it simple to turn a static React app into a fully dynamic, page-based experience.

👉 Download Free Ebook →

👉 Get Free Course →

🔧 Installation

To get started, install React Router:

```
  npm install react-router-dom
```

✅ Basic Setup Example using React Router v6

🧩 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 STYLE={{ fontFamily: 'Arial', padding: '20px' }}>

```
        <h2>🌐 React Router Demo</h2>
```
```
        <nav>
```

          <Link TO="/" STYLE={{ marginRight: '15px' }}>Home</Link>

          <Link TO="/about">About</Link>

```
        </nav>
```
```
 
```
```
        <Routes>
```

          <Route path="/" element={<Home />} />

          <Route path="/about" element={<About />} />

```
        </Routes>
```
```
      </div>
```
```
    </Router>
```
```
  );
```
```
}
```
```
 
```
```
export DEFAULT App;
```

🧩 Home.js

  import React from 'react';
function Home() {

  return 
🏠 Welcome to the Home Page
;

}
export default Home;

🧩 About.js

  import React from 'react';
function About() {

  return 
ℹ️ This is the About Page
;

}
export default About;

💡 Key Concepts:

BrowserRouter wraps your entire app for routing support
Routes contains multiple Route components
Link is used instead of to prevent full page reload

element={} defines what to render on a given path

🧠 Summary

Similar to conventional multi-page websites, your app may have dynamic and tidy navigation using React Router without requiring page reloads. This improves the efficiency and smoothness of the user experience. You can include dynamic URLs, protected routes, nested routes, and more as your project expands.

🎁 Up to 99% Off Courses (Coupon)
💥 Use Promo Code: STANDARDOFFER💥
🚀 Get Free Salesforce Course Access: www.thevijaykumar.w3web.net

FAQ (Frequently Asked Questions)

What are the three types of routing?

There are three types of Routing: Static Routing. Default Routing. Dynamic Routing.

How many types of routers are in React?

React Router plays a crucial role in building single-page applications (SPAs) with React. It helps manage the navigation and UI state of the application. In React Router, there are mainly three types of routers: BrowserRouter , HashRouter , and MemoryRouter .

What are hooks in React?

A React Hook is a special function in React that lets developers use state and other React features without writing a class. It makes code simpler and easier to manage by allowing functionality to be added directly within components. React Hooks makes the code easier to read and write.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to create ReactJS Routing – Setup and Basic Example (React Router) | Your complete guide to routing in React | Reactjs routing setup and basic example