easy-router-react

npm install easy-router-react

or

yarn add easy-router-react

Usage

remember react-router-dom is required!!

Step 1

index.js

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

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </React.StrictMode>

Step 2

routes.jsx

const routes = {
  // pages
  "/": <Home /> /*__ http://localhost:3000 __*/,
  "/signin": <SignIn /> /*__ http://localhost:3000/signin __*/,

  // If sub pages
  "/profile": {
    element: <ProfileLayout /> /*__ http://localhost:3000/profile  __*/,
    sub_pages: {
      "/": <Profile /> /*__ http://localhost:3000/profile __*/,
      orders: <MyOrders /> /*__ http://localhost:3000/profile/orders  __*/,
      settings: <Settings /> /*__ http://localhost:3000/profile/settings  __*/,
    },
  },

  // Put NotFound Component Here
  "*": <div>404 Not Found</div>,
};

export default routes;

App.jsx

import EasyRouter from "easy-router-react";
import routes from "./routes";

export default function App() {
  return (
    <>
      <header>Header</header>
      <EasyRouter routes={routes} />
      <footer>Footer</footer>
    </>
  );
}