React Router is the most popular library for handling routing in React applications. This guide walks you through setting up and using React Router with a clear structure and examples.
Install React Router by running the following command in your terminal:
npm install react-router-domIf you are upgrading from an older version (e.g., v5), use the @latest flag:
npm install react-router-dom@latestThis guide uses React Router v6.
To create a multi-page application, structure your files as follows:
src/
pages/
Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js
Each file will contain a simple React component.
index.jsNow, configure React Router in your index.js file to handle routing between pages:
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
<BrowserRouter>: Wraps the application, enabling React Router to manage navigation.
<Routes>: Defines all the possible routes.
<Route>: Specifies the path and the component to render.
The path="/" route renders the Layout component.
Nested routes like path="blogs" become /blogs when combined with the parent route.
Default Route: <Route index element={<Home />}> acts as the default route for /.
404 Page: The path="*" route catches all undefined URLs, useful for a 404 page.
The Layout component is a shared wrapper for all pages. It includes navigation links and an <Outlet> to render the selected route.
import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
);
};
export default Layout;
Here are simple components for the pages:
Home.js
const Home = () => {
return <h1>Welcome to the Home Page</h1>;
};
export default Home;
Blogs.js
const Blogs = () => {
return <h1>Our Blog Posts</h1>;
};
export default Blogs;
Contact.js
const Contact = () => {
return <h1>Get in Touch</h1>;
};
export default Contact;
NoPage.js
const NoPage = () => {
return <h1>404 - Page Not Found</h1>;
};
export default NoPage;
React Router uses <Link> instead of <a href=""> for navigation. This keeps the app’s state intact and avoids full page reloads.
For example:
<Link to="/">Home</Link>
<Link to="/blogs">Blogs</Link>
<Link to="/contact">Contact</Link>
With React Router, you can create dynamic, multi-page applications easily. Here's what we covered:
Install React Router using npm.
Set up a clear folder structure for pages.
Configure routing in index.js.
Use <Routes> and <Route> for navigation.
Use <Link> for internal navigation.
Handle undefined routes with a catch-all 404 page.
Try these examples to get started with routing in React!
The complete source code for this project is available on GitHub