SETTING UP REACT ROUTER

April 05, 2025

TO SETUP ROUTES, WE INSTALL REACT ROUTER BY THE COMMAND,

npm i react-router-dom

TO USE IT, WE NEED TO IMPORT ROUTE,ROUTES AND BROWSERROUTER.

import { BrowserRouter, Routes, Route } from "react-router-dom";

ROUTES ARE DECLARED BETWEEN THE BROWSERROUTER TAG.

HERE, ANCHOR TAGS DONOT WORK <a> . WE WILL USE LINK TAG INSTEAD.

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

WE CREATE A NEW PAGE TO DISPLAY AN ERROR MESSAGE WHEN AN UN-EXISTING ROUTE IS CALLED.

NOTFOUND.JS

export default function NotFound() {
  return (
    <div className="text-center mt-5">
      <h1>404 Not Found!!</h1>
      <p>Sorry! the page you are looking for, doesnot exist</p>
    </div>
  );
}

INDEX.JS

WE REMOVE THE NAVBAR AND FOOTER IN THE OTHER PAGES,AS THEY EXIST IN THE INDEX.JS

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Navbar from "./landing_page/Navbar";
import Footer from "./landing_page/Footer";
import HomePage from "./landing_page/home/HomePage";
import AboutPage from "./landing_page/about/AboutPage";
import PricingPage from "./landing_page/pricing/PricingPage";
import Productpage from "./landing_page/product/Productpage";
import SignupPage from "./landing_page/signup/SignupPage";
import SupportPage from "./landing_page/support/SupportPage";
import NotFound from "./landing_page/NotFound";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Navbar />
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      <Route path="/pricing" element={<PricingPage />} />
      <Route path="/product" element={<Productpage />} />
      <Route path="/signup" element={<SignupPage />} />
      <Route path="/support" element={<SupportPage />} />
      <Route path="*" element={<NotFound />} />
               FOR ALL
    </Routes>
    <Footer />
  </BrowserRouter>
);

NAVBAR.JS

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

function Navbar() {
  return (
    <>
      <nav class="navbar navbar-expand-lg border-bottom" style={{backgroundColor:"#fff"}}>
        <div class="container">
          <Link class="navbar-brand"to="/">
            <img src="media/images/logo.svg" style={{ width: "25%" }} />
          </Link>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <Link class="nav-link active" to="/signup">
                  Signup
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link active"to="/about">
                  About
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link active"to="/product">
                  Products
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link active"to="/pricing">
                  Pricing
                </Link>
              </li>
              <li class="nav-item">
                <Link class="nav-link active"to="/support">
                  Support
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

export default Navbar;