Creating and Testing Routes for CloudNoteBook App | React JS Tutorial for Beginners 🗂️🔗
Every real-world app has more than one screen — a Home page, a Login page,
a page to view your notes, and so on. In our CloudNoteBook app, we need a way to move
between these screens without reloading the whole page. That's exactly what React Router
gives us: client-side routing that keeps our app fast and feels like a native application.
In this tutorial, we will learn:
What client-side routing is and why React Router is used for it
Installing react-router-dom in the CloudNoteBook project
Wrapping the app with BrowserRouter
Defining routes with Routes and Route
Navigating between pages using the Link component
Testing every route to confirm it renders the correct page
---
What is Routing in a React App?
Routing means showing different components based on the URL path, without the browser
making a fresh request to the server every time. For example, visiting
/login should show the Login page, while /notes should show the
Notes page — all inside the same single-page React app. We achieve this using the
react-router-dom library.
---
Step 1: Install react-router-dom
Open your terminal in the CloudNoteBook project folder and install the routing package.
npm install react-router-dom
---
Step 2: Wrap the App with BrowserRouter
Open index.js and wrap the <App /> component with BrowserRouter
so routing works throughout the entire application.
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
---
Step 3: Create the Page Components
For CloudNoteBook, we'll create three simple page components: Home.js,
Login.js, and Notes.js. Each lives in its own folder inside src/components.
// Home.js
import React from "react";
const Home = () => {
return <h2 className="text-center my-4">Welcome to CloudNoteBook 📒</h2>;
};
export default Home;
// Login.js
import React from "react";
const Login = () => {
return <h2 className="text-center my-4">Login to CloudNoteBook 🔐</h2>;
};
export default Login;
// Notes.js
import React from "react";
const Notes = () => {
return <h2 className="text-center my-4">Your Saved Notes 🗒️</h2>;
};
export default Notes;
---
Step 4: Define Routes in App.js
Now let's use Routes and Route to map each URL path to its matching component.
import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import Notes from "./components/Notes";
import Navbar from "./components/Navbar";
function App() {
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/notes" element={<Notes />} />
</Routes>
</>
);
}
export default App;
---
Step 5: Add Navigation Links with Link
Instead of regular <a> tags (which reload the page), we use the Link
component from react-router-dom so navigation stays smooth and instant.
// Navbar.js
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark px-3">
<Link className="navbar-brand" to="/">CloudNoteBook</Link>
<div className="d-flex gap-3">
<Link className="nav-link text-white" to="/">Home</Link>
<Link className="nav-link text-white" to="/login">Login</Link>
<Link className="nav-link text-white" to="/notes">Notes</Link>
</div>
</nav>
);
};
export default Navbar;
---
Step 6: Test Every Route
Run the app locally and manually verify each route renders the right page.
With the dev server running, test the following in your browser:
Visit http://localhost:3000/ → should show the Home page
Click Login in the navbar → URL becomes /login, Login page appears
Click Notes in the navbar → URL becomes /notes, Notes page appears
Use the browser's Back/Forward buttons → the correct page should load each time
Manually type /notes in the address bar and press Enter → the Notes page should still load correctly
---
Step 7: Full Updated App.js
Here is the complete App.js with routing wired up end-to-end.
import React from "react";
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Login from "./components/Login";
import Notes from "./components/Notes";
function App() {
return (
<>
<Navbar />
<div className="container my-4">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/notes" element={<Notes />} />
</Routes>
</div>
</>
);
}
export default App;
---
Route Setup at a Glance
| Path |
Component |
What It Shows |
/ |
Home.js |
The CloudNoteBook welcome/landing page |
/login |
Login.js |
The login form for existing users |
/notes |
Notes.js |
The list of the user's saved notes |
---
Features and Learnings:-
Understood what client-side routing is and why it's needed in React apps.
Installed and configured react-router-dom in the CloudNoteBook project.
Wrapped the app with BrowserRouter to enable routing globally.
Created separate page components: Home, Login, and Notes.
Defined routes using Routes and Route with the element prop.
Used the Link component for reload-free navigation in the navbar.
Manually tested every route, including direct URL access and browser Back/Forward behavior.
Prepared the app for the next step: adding protected/private routes for logged-in users.