1 of 26

React Routing

Web Technology

Rourab Paul, Subin Sahayam, Assistant Professor,

Department of Computer Science and Engineering

Shiv Nadar University

2 of 26

Front End Development Tasks

K1

3 of 26

React Router

  1. Client-Side Routing
  2. Routing?
    • Directing to Different Pages

K1

4 of 26

React Router

  1. Client-Side Routing
  2. Routing?
    • Directing to Different Pages

K2

5 of 26

React Router

  1. Client-Side Routing
  2. Routing?
    • Directing to Different Pages
      • Internal Routing
      • External Routing

K1

React Router is primarily for internal routing within a React application.

6 of 26

Multi-Page Applications

  1. Client-Side Routing
  2. Multi-Page Applications 

​

K2

7 of 26

Single Page Applications

  1. Client-Side Routing
  2. Multi-Page Applications 
  3. Single-Page Applications

​

K2

8 of 26

React Router

  1. Client-Side Routing
  2. Routing?
    • Directing to Different Pages
  3. React Router

K1

9 of 26

Need for React Router

  1. Navigation Across Multiple Pages

Enables navigation between different views within a React application.

  • React Router
    • Routing library for React
    • Client Sides Routing
  • SPAs without Page Refresh
  • Allows Utilization of Browser History Feature

Utilizes the browser's History API

  • Provides Routing Components

BrowserRouter, Routes, Route, Link, NavLink

K1

10 of 26

React Router - Packages

  1. react-router  
  2. react-router-dom
  3. react-router-native

​

K1

11 of 26

React Router - Packages

  1. react-router 
    1. Core package
    2. Components and Functions
  2. react-router-dom
  3. react-router-native

​

K1

12 of 26

React Router - Packages

  1. react-router 
    1. Core package
    2. Components and Functions
  2. react-router-dom
    • Browser
  3. react-router-native

​

K1

13 of 26

React Router - Packages

  1. react-router 
    1. Core package
    2. Components and Functions
  2. react-router-dom
    • Browser
  3. react-router-native
    • Mobile Applications

​

K1

14 of 26

React Router - Packages

  1. react-router 
    1. Core package
    2. Components and Functions
  2. react-router-dom
    • Browser
    • npm install react-router-dom@latest
  3. react-router-native
    • Mobile Applications

​

K1

15 of 26

React Router – Simple Routing

K2

16 of 26

React Router Steps

  1. React Router Installation
  2. Creating Necessary React Pages/Components (Separate jsx files)
  3. Import Target React Pages/Components (App.jsx)
  4. Importing Necessary Packages from react-router-dom (App.jsx)
  5. Add BrowerRouter and Routes (App.jsx)
  6. Add Corresponding Route (App.jsx)
  7. Link to Navigate to Components (App.jsx)

K1

17 of 26

Simple Routing

  1. React Router Installation
    • npm install react-router-dom@latest

K3

18 of 26

Simple Routing

Step 1 — Go to your working folder

Open the terminal and run:

​

​

cd /home/rourab/WebTech_lab

K3

19 of 26

Simple Routing

Step 2 — Create a new React project

​

Run:

​

npm create vite@latest react-routing-example -- --template react

K3

It will ask some questions. If prompted, choose React and JavaScript.

Then enter the project:

cd react-routing-example

20 of 26

Simple Routing

Step 3 — Install the dependencies

​

Run:

​

npm install

​

Then install React Router:

​

npm install react-router-dom@latest

K3

21 of 26

Simple Routing

Step 4 — Start the project once

​

Run:

npm run dev

​

You should see something similar to:

​

Local: http://localhost:5173/

​

Open that URL.

You will initially see the default Vite React page. That's normal.

K3

22 of 26

Simple Routing

Step 5 — Create our routing structure

​

Now your project should look like:

K3

react-routing-example/

│

├── package.json

├── index.html

├── vite.config.js

│

└── src/

├── App.jsx

├── main.jsx

├── App.css

├── index.css

└── assets/

We will change it to:

react-routing-example/

│

├── package.json

├── index.html

├── vite.config.js

│

└── src/

├── App.jsx

├── main.jsx

├── style.css

│

└── pages/

├── Home.jsx

├── About.jsx

└── Contact.jsx

sample code

23 of 26

Simple Routing

Step 6 — Download sample code

paste the pages inside src directory

replace App.jsx, main.jsx and style.css in src directory

run

npm run dev

K3

24 of 26

Advantages of React Router

​

​

​

​

  1. Navigation without full page reload
  2. Supports Single Page Applications
  3. Clean and meaningful URLs
  4. Browser Back/Forward support
  5. Component-based and dynamic routing

25 of 26

References

​

​

​

​

​

  • Robin Wieruch, “The Road to React: The ReactJS with Hooks”, Lean Publishing, 2023 Edition.

26 of 26

THANK YOU