Routing in SPAs with React Router v6

Part-1 explains the basic routing done with the help of React-Router in React Apps

Well, first let's understand what are SPAs

When a user runs an application and clicks on any of the links provided, and when only the content of the page changes instead of the entire page reloading then the applications are known as Single Page Applications or SPAs. In SPAs, the user stays on the same page for the entire application.

What is React Router ... ?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application and allows changing the browser URL keeping the UI in sync with the URL.

Working with React-Router-v6

Step 1: Installing React-router in your project

npx create-react-app my-app

npm i react-router-dom@next history

@next will install the v6 (beta-version) of the react router.

Step 2: Import `BrowserRouter` from `react-router-dom` inside `index.js`

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>,
  rootElement
);

Step 3: Setting the `Routes` of the various components and creating a `NavBar` for navigation

Build 3-4 React Components and import them into your App.jsx

Import Routes, Route and Link from react-router-dom

Note: NavLink can also be used in place of Link

Setup the components with their routes in the App.jsx as follows:

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import Cart from "./pages/Cart";
import Category from "./pages/Category";
import WishList from "./pages/WishList";
import ProductDetail from "./pages/ProductDetail";

export default function App() {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home</Link> ||
        <Link to="/category">Category</Link> ||
        <Link to="/product">Product</Link> ||
        <Link to="/wishlist">WishList</Link> ||
        <Link to="/cart">Cart</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/category" element={<Category />} />
        <Route path="/product" element={<ProductDetail />} />
        <Route path="/wishlist" element={<WishList />} />
        <Route path="/cart" element={<Cart />} />
      </Routes>
    </div>
  );
}

The nav tag will help us create a navbar which will provide us with the links to navigate between the different components.

Wrap the <Route /> defined for all the React Components within the <Routes> </Routes> tag

<Route /> has a prop path which defines the url of the component to be viewed which is mentioned inside the prop element

Now, clicking on the various links in the created navbar will render the respective components on the view.

And with this, Routing in our React App is completed! Isn't it amazing!!

Hope, you understood the basic level of routing that can be done in React applications with the help of the React-Router.

Part-2 will explain the usage of various hooks of react-router-dom such as useParams(), useNavigate(), useLocation()

Thank you for reading :-)

Routing in SPAs with React Router v6 - Part 1