How you can implement client-side routing in React.

How you can implement client-side routing in React.

Note: we’ll be using react-router-dom v6

To implement client-side routing in a React, you can follow these steps:

1. Install react-router-dom: Make sure you have react-router-dom installed in your project. If not, run the following command in your terminal:

npm install react-router-dom

React Code

1. Create Components: Create the basic components for each page. Here’s an example for the Home, About, and Contact components (For example I am creating these components)

• Home

// Home.js
import React from 'react';

function Home() {
 return (
 <div>
 <h1>Home Page</h1>
 <p>Welcome to our e-commerce website!</p>
 <p>Here are some of our products:</p>
 <ul>
 <li>Product 1</li>
 <li>Product 2</li>
 <li>Product 3</li>
 </ul>
 </div>
 );
}

export default Home;

• Contact US

// ContactUs.js
import React from 'react';

function ContactUs() {
 return (
 <div>
 <h1>Contact Us</h1>
 <form>
 <label>Name:</label>
 <input type="text" name="name" />

 <label>Email:</label>
 <input type="email" name="email" />

 <label>Message:</label>
 <textarea name="message"></textarea>

 <button type="submit">Submit</button>
 </form>
 </div>
 );
}

export default ContactUs;

• About Us

// About.js
import React from 'react';

function About() {
 return (
 <div>
 <h1>About Us</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, felis et pharetra feugiat, quam lorem tristique eros, ut ullamcorper nunc felis sed neque. Aliquam at risus quis leo iaculis convallis at sit amet urna.</p>
 </div>
 );
}

export default About;

2. Create Navigation Bar: Create a Navbar component that will render the navigation links and the hamburger menu for smaller screen devices.

// Navbar.js
import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
 const [isOpen, setIsOpen] = useState(false); // State to track menu visibility

 const toggleMenu = () => {
 setIsOpen(!isOpen);
 };

 return (
 <nav>
 <div className="logo">Logo</div>
 
 {/* Hamburger Icon */}
 <button className="hamburger" onClick={toggleMenu}>
 ☰
 </button>

 {/* Navigation Links */}
 <ul className={`nav-links ${isOpen ? 'active' : ''}`} id="nav-links">
 <li><Link to="/">Home</Link></li>
 <li><Link to="/about">About</Link></li>
 <li><Link to="/services">Services</Link></li>
 <li><Link to="/contact">Contact</Link></li>
 </ul>
 </nav>
 );
};

export default Navbar;

3. Set up Routes: In your App.js file, import the necessary components from react-router-dom and define your routes using the BrowserRouter , Routes components.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import ContactUs from './components/ContactUs';
import Navbar from './components/Navbar';

function App() {
 return (
 <Router>
 <Navbar />
 <Routes> 
 <Route path="/" element={<Home />} /> 
 <Route path="/about" element={<About />} /> 
 <Route path="/contact" element={<Contact />} /> 
 </Routes>
 );
}

export default App;

• BrowserRouter as Router: A wrapper that enables client-side routing in a React app using the HTML5 history API.
• Routes: A container for defining multiple Route components in React Router v6 and above.
• Route: Defines a single route with a path and the component to render when the path matches the current URL.

4. Some basic CSS: Use CSS to make the navigation bar responsive. You can use media queries to show the hamburger menu on smaller screen devices.

/* Navbar styles */
 nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 60px;
 background-color: #333;
 padding: 0 20px;
 position: relative;
}
 ul {
 display: flex;
 list-style: none;
 margin: 0;
 padding: 0;
}
 li {
 margin: 0 10px;
}
 a {
 color: #fff;
 text-decoration: none;
 font-weight: bold;
}
/* Hamburger Menu */
 .hamburger {
 display: none;
 background: none;
 border: none;
 color: #fff;
 font-size: 24px;
 cursor: pointer;
}
/* Mobile Styles */
 @media (max-width: 768px) {
 .hamburger {
 display: block;
 /* Show hamburger icon on smaller screens */
 }
 ul {
 flex-direction: column;
 align-items: center;
 }
 nav ul {
 position: absolute;
 top: 60px;
 left: 0;
 right: 0;
 background-color: #333;
 padding: 10px 0;
 display: none;
 /* Hide menu initially */
 margin: 0;
 }
 ul.active {
 display: flex;
 /* Show menu when active class is added */
 }
 li {
 margin: 10px 0;
 }
}

That’s it! We have now implemented client-side routing.

Queries and Doubts

Thanks for the read :) Hope you have enjoyed reading it 🤩 and learnt something new today.

If you have any doubts or queries feel free to drop a comment or

⁍ Connect with me on my 🔗Topmate 💬.

⁍ You can also reach out to me on my 🔗LinkedIn.

⁍ Please clap for this post if you enjoyed reading it 📗 and follow for more interesting articles.

⁍ You can also support me and my writings by treating me to a nice virtual cup of coffee ☕️.