https://github.com/sital002/react-routing

A simple and light weight routing library for react
https://github.com/sital002/react-routing

react react-routing

Last synced: 13 days ago
JSON representation

A simple and light weight routing library for react

• Host: GitHub
• URL: https://github.com/sital002/react-routing
• Owner: sital002
• Created: 2024-01-08T09:54:56.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-10T04:29:44.000Z (10 months ago)
• Last Synced: 2024-10-05T23:21:19.049Z (about 1 month ago)
• Topics: react, react-routing
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@sital002/react-routing
• Size: 27.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# A simple and light weight routing library for react

```bash

npm i @sital002/react-routing

```

## How to implement it

App.jsx

```jsx

import { BrowserRouter, Route, Routes } from "@sital002/react-routing";

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 (

    <>

      

        

        

          } />

          } />

          } />

        

        

      

    >

  );

}

export default App;

```

Navbar.jsx

```jsx

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

function Navbar() {

  return (

    


      


        

          
Home

        

        

          
About

        

        

          
Contact

        

      

    

  );

}


export default Navbar;

```

useRouter()

```jsx

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

import React from "react";

export default function Footer() {

  const router = useRouter();

  return (

    


       {

          router.push("/");

        }}

      >

        Home

      

       {

          router.push("/about");

        }}

      >

        About

      

       {

          router.push("/contact");

        }}

      >

        Contact

      


       {

          router.back();

        }}

      >

        Go back

      

       {

          router.forward();

        }}

      >

        Go forward

      

    

  );

}

```