Setting Up Multiple Pages with React Router DOM v6

Setting Up Multiple Pages with React Router DOM v6

Hey there, coding enthusiast! If you’re excited to add multiple pages to your React application but are unsure where to start, you’ve come to the right place. Today, we’ll break down how to use React Router DOM v6 to navigate seamlessly through your applications. Ready to dive in? Let’s get started!

What is React Router DOM?

React Router DOM is a library that allows us to implement dynamic routing in our React applications. Essentially, it’s how we make our apps feel like they have multiple pages without needing to reload the whole page. Pretty neat, right?

Why Use React Router DOM v6?

Version 6 of React Router DOM brings a more consistent and powerful way to handle navigation, with a few syntax changes that make defining routes more straightforward. If you’re familiar with previous versions, don’t worry — we’ll guide you through the differences.

Setting Up Your Project

First things first, ensure you have Node.js and npm installed in your system. If not, download them from [Node.js official site](https://nodejs.org/).

Create a new React app using create-react-app. Open your terminal and run:

npx create-react-app react-router-demo
cd react-router-demo

Once your project setup is done, you need to install React Router DOM. Run:

npm install react-router-dom

Creating Pages

Let’s create some simple React components representing different pages. Inside the src folder, create a new directory called pages and add the following files:

Home.js

import React from 'react';
const Home = () => {
return (
<div>
<h2>Home Page</h2>
<p>Welcome to the Home Page!</p>
</div>
);
};
export default Home;

About.js

import React from 'react';
const About = () => {
return (
<div>
<h2>About Page</h2>
<p>Here's some information about us.</p>
</div>
);
};
export default About;

Contact.js

import React from 'react';
const Contact = () => {
return (
<div>
<h2>Contact Page</h2>
<p>You can contact us here.</p>
</div>
);
};
export default Contact;

Setting Up Routes

With our pages ready, it’s time to set up routing. Head on over to src/App.js and modify it like this:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;

Breaking Down the Code

1. BrowserRouter (Renamed as Router): This component wraps our entire app. It’s the main hub that allows us to enable the routing capabilities.

2. Routes and Route: These components help define individual routes. The Routes component contains Route components where each Route has a path and an element. The path is the URL path and element is the component to render.

3. Link Component: The Link component replaces anchor tags () in routing, helping us navigate between routes without reloading the page.

npm start

nav ul {
list-style-type: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
text-decoration: underline;
}

import './Nav.css';