@prop_c/react-routing

A simple routing library for react.

npm i @prop_c/react-routing

How to implement it

App.jsx

import { BrowserRouter, Route, Routes } from "@prop_c/react-routing";
import "./App.css";
import Footer from "./components/Footer";
import Navbar from "./components/Navbar";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Home from "./pages/Home";

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

export default App;

Navbar.jsx

import { Link } from "@prop_c/react-routing";

function Navbar() {
  return (
    <div>
      <ul>
        <Link href="/">
          <li>Home</li>
        </Link>
        <Link href="/about">
          <li>About</li>
        </Link>
        <Link href="/contact">
          <li>Contact</li>
        </Link>
      </ul>
    </div>
  );
}

export default Navbar;

useRouter()

import { useRouter } from "@prop_c/react-routing";
import React from "react";

export default function Footer() {
  const router = useRouter();
  return (
    <div>
      <button
        onClick={() => {
          useRouter().push("/");
        }}
      >
        Home
      </button>
      <button
        onClick={() => {
          router.push("/about");
        }}
      >
        About
      </button>
      <button
        onClick={() => {
          useRouter().push("/contact");
        }}
      >
        Contact
      </button>

      <button
        onClick={() => {
          useRouter().back();
        }}
      >
        Go back
      </button>
      <button
        onClick={() => {
          useRouter().forward();
        }}
      >
        Go forward
      </button>
    </div>
  );
}