Implementing React Router and REST API Integration in a Travel Website
Introduction:
Modern web applications demand dynamic navigation along with effective data communication between frontend and backend systems. React.js has emerged as one of the most popular JavaScript libraries for creating scalable user interfaces. Two crucial components of contemporary web development with React are client-side routing and the integration of REST APIs. In this project, a straightforward Travel Website called “Travel Explorer” was created using React. The application showcases the use of React Router for navigating between pages and REST API integration for obtaining data related to travel packages.
The site features the following primary pages:
· Home Page
· Travel Packages Page
· Contact Page
The goal of this project is to illustrate how React Router facilitates navigation in a Single Page Application (SPA) and how REST APIs supply dynamic data to the application.
React Router Implementation:
What is React Router?
A library called React Router is used in React applications to implement client-side routing. React Router dynamically modifies the view based on the URL rather than reloading the entire page.
Advantages:
· Quicker navigation
· Improved user experience
· Not reloading the entire page
· Compatible with Single-Page Applications
Router Setup:
React Router was implemented in App.js.
import React from “react”;
import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;
import Navbar from “./Navbar”;
import Home from “./Home”;
import Packages from “./Packages”;
import ContactForm from “./ContactForm”;
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/packages” element={<Packages />} />
<Route path=”/contact” element={<ContactForm />} />
</Routes>
</Router>
);
}
export default App;
Explanation:
Router — Wraps the entire application
Routes — Container for all route paths
Route — Defines which component loads for a specific URL
Navigation using React Router:
Navigation between pages is handled by the Navbar component using the Link component.
import { Link } from “react-router-dom”;
<Link to=”/”>Home</Link>
<Link to=”/packages”>Packages</Link>
<Link to=”/contact”>Contact</Link>
Explanation:
Unlike traditional HTML <a> tags, the Link component:
- Prevents full page reload
- Updates only the component view
- Improves application performance
REST API Integration:
What is REST API ?
REST (Representational State Transfer) is a standard communication protocol used for exchanging data between client and server.
In this project, a mock REST API was implemented using a JSON file.
{
“packages”: [
“Goa Beach Holiday”,
“Manali Adventure Trip”,
“Dubai Luxury Tour”,
“Kerala Backwater Cruise”,
“Thailand Island Escape”,
“Europe Explorer Tour”
]
}
Fetching Data using REST API:
The Packages.js component fetches data from the API using the fetch() method.
useEffect(() => {
fetch(“/packages.json”)
.then((res) => res.json())
.then((data) => {
setPackages(data.packages);
})
.catch((err) => console.log(err));
}, []);
Explanation:
Get Harsh Gala’s stories in your inbox
Join Medium for free to get updates from this writer.
fetch() — Sends HTTP request to API
res.json() — Converts response into JSON format
setPackages() — Stores data in state
This demonstrates client-server data communication.
React Hooks Used:
The project utilizes two major React Hooks.
useState():
Used for managing component state.
Example:
const [packages, setPackages] = useState([]);
Purpose:
- Stores travel packages
- Stores selected packages
- Handles search input
useEffect():
Used for handling side effects such as API calls.
Example:
useEffect(() => {
fetch(“/packages.json”)
}, []);
Purpose:
- Runs API request when component loads
- Prevents repeated API calls
Dynamic Search Functionality:
The packages page allows users to search travel packages dynamically.
const filteredPackages = packages.filter((pkg) =>
pkg.toLowerCase().includes(search.toLowerCase())
);
This logic filters packages based on user input and displays matching results.
Package Selection Feature:
Users can select packages and view them in a selected list.
const handleSelect = (pkg) => {
setCurrent(pkg);
};
Selected packages are stored using React state and displayed dynamically.
Contact Form Implementation:
The contact page demonstrates form validation using React state and class components.
Features:
- Input validation
- Email verification
- Success message display
- Controlled form components
This demonstrates user input handling in React applications.
Conclusion
This project successfully demonstrates the implementation of React Router and REST API integration in a travel website application. React Router enables seamless navigation within a Single Page Application, while REST APIs allow dynamic data retrieval from external sources.
By combining React components, hooks, routing, and API integration, the system provides a practical example of modern web development techniques. The approach used in this project highlights how React can be effectively used to build scalable and interactive web applications.
GitHub Link: https://github.com/harshgala25/travel
Vercel Link: https://travel-lilac-iota.vercel.app
