@modulers/react-dynamic-routes

Dynamic route system for using page-based routing in React applications.

Installation

npm install @modulers/react-dynamic-routes
yarn add @modulers/react-dynamic-routes

Usage

RouterMeta (`routerConfig.ts`)

Setting up the RouterMeta configuration Create a routerConfig.ts file in your react src directory:

export const routerMeta = {
  HomePage: {
    name: "Home",
    path: "/",
    isShow: true,
  }
  //...
  // Using our CLI, push your new Page automatically. 
};

DynamicRoutes (`App.tsx`)

Using DynamicRoutes in your @/App.tsx In your App.tsx or main component:

import DynamicRoutes from "@modulers/react-dynamic-routes";
import { routerMeta } from "./routerConfig";

function App() {
  return (
    <DynamicRoutes RouterMeta={routerMeta} />
  );
}

export default App;

Creating new pages using the CLI

You can use the provided CLI tool to automatically create new page directories and update the routerConfig.ts with the new route:

npx modulers-routes-cli create-page ${PageName}

npm run create-page ${PageName}

yarn create-page ${PageName}

Replace ${PageName} with the name of the page you want to create.

The CLI will

create a new directory src/pages/${PageName} and an index.tsx file inside it
then, update the routerConfig.ts with the new route configuration.

Using Our cli without npx

Set your pacakge.json like this.

package.json

"scripts": {
  "create-page": "modulers-routes-cli create-page"
}

then, you can use cli like this.

npm run create-page ${PageName}

yarn create-page ${PageName}

Customizing DynamicRoutes

You can also provide custom fallback components to DynamicRoutes:

import DynamicRoutes from "@modulers/react-dynamic-routes";
import { routerMeta } from "./routerConfig";
import MyErrorFallback from "./components/MyErrorFallback";
import MyLoadingFallback from "./components/MyLoadingFallback";
import MyLayout from "./components/MyLayout";

function App() {
  return (
    <DynamicRoutes
      RouterMeta={routerMeta}
      ErrorFallback={MyErrorFallback}
      LoadingFallback={MyLoadingFallback}
      Layout={MyLayout}
    />
  );
}

export default App;

Dependencies

This library relies on several dependencies:

react-router-dom for routing.
@tanstack/react-query for query error reset boundary.
react-error-boundary for error boundaries.

Ensure you have these dependencies installed in your project.