Add Routing for Shopping Cart in React Application - Part 4

Welcome back to our journey of building a Shopping Cart application! In this fourth part, we're going to level up our app by adding routing. Routing allows us to navigate between different pages or views within our application. It's like adding signposts to guide our users through their shopping experience. Let's dive in!

1. Install React Router

First things first, let's install React Router. Run the following command to install react-router-dom npm package.

npm i react-router-dom

You will find the version of the following packages in React application.

react

^18.2.0

react-router-dom

^6.22.1

2. Configuring Routes

Next, we need to set up our routes. Update the following files where we'll define our application routes:

App.jsx

import { Route, BrowserRouter, Routes } from "react-router-dom";
import Home from "./containers/Home";
import Products from "./containers/Products";
import Cart from "./containers/Cart";
import Layout from "./components/Layout";

function App() {
  return (
    <browserrouter>
      <routes>
        <route element="{<Layout">}>
          <route path="/" element="{<Home">} />
          <route path="/products" element="{<Products">} />
          <route path="/cart" element="{<Cart">} />
        </route>
      </route></route></route></routes>
    </browserrouter>
  );
}

export default App;

/components/Layout.jsx

import { Outlet } from "react-router-dom";
import Header from "./Header";
import Footer from "./Footer";

function Layout() {
  return (
    <>
      <header>
      <hr class="my-2">
      <outlet>
      <hr class="my-2">
      <footer>

  );
}

export default Layout;</footer></outlet></header>

3. Navigating Between Pages

Now that our routes are set up, we can add navigation links to our components using the Link component from React Router:

/containers/Cart.jsx

import { Link } from "react-router-dom"

function Cart() {
  return (
    <>
      <h1 class="text-2xl text-blue-700 font-bold">Cart Page!</h1>
      <link to="/">Home

  )
}

export default Cart

/containers/Home.jsx

import { Link } from "react-router-dom";

function Home() {
  return (
    <>
      <h1 class="text-2xl text-blue-700 font-bold">Home Page!</h1>
      <link to="/products">Products

  );
}

export default Home;

/containers/Products.jsx

import { Link } from "react-router-dom"

function Products() {
  return (
    <>
      <h1 class="text-2xl text-blue-700 font-bold">Products Page!</h1>
      <link to="/cart">Cart

  )
}

export default Products

Conclusion

Congratulations! You've successfully added routing to your Shopping Cart application. With React Router, navigating between pages is a breeze, providing a seamless shopping experience for your users. Keep exploring and building, and remember: the journey of coding is as exciting as the destination!

Happy Coding!

"Life is a journey, not a destination – and so is coding!"

Demo & Source Code

GitHub Repository

Add Routing for Shopping Cart in React Application - Part 4