@gohanfromgoku/react-router-kit

• Install the package

npm install @gohanfromgoku/react-router-kit

yarn add @gohanfromgoku/react-router-kit

• Usage

// Navigation.tsx
import {OutletProvider, createRoutes} from "@gohanfromgoku/react-router-kit";
import About from "./pages/About";
import Home from "./pages/Home";
import User from "./pages/User";

const routes = createRoutes([
  {
    component: About,
    pathname: "/about",
  },
  {
    component: Home,
    pathname: "/",
  },
  {
    component: User,
    pathname: "/user/:id",
  },
]);


const Navigation = () => {
  return (
    <OutletProvider routes={routes}/> // you can add your own pageNotFound component
  );
};

export default Navigation;

//App.jsx

import React from "react";
import Navigation from "./Navigation";
import {navigate} from "@gohanfromgoku/react-router-kit";

const NavBtns = () => {
  return (
    <div>
        <button onClick={() => navigate("/")}>
          HOME
        </button>
        <button onClick={() => navigate("/about")}>
          About
        </button>
        <button onClick={() => navigate("/user/1234?name=1234")}>
          User
        </button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Hi</h1>
      <NavBtns />
      <Navigation/>
    </div>
  );
};

export default App;

 // User.tsx

 import {useLocation} from "@gohanfromgoku/react-router-kit";

const User = () => {
  const details = useLocationDetails();
  const params = useLocationParams();
  const queryParams = useLocationQueryParams();

  const extractedQueryParams = extractQueryParamsFromURL(details.href);
  // You can use window.location.href also instead of details.href.
  // This is same as useLocationQueryParams But you have to call manually every time, where useLocationQueryParams will auto get the values

  console.log(details, params, queryParams );
  return (
    <div>
          user
    </div>
  );
};

export default User;