vite-dynamic-pages-router

Automatic and flexible file-based routing system for Vite + React.
Just drop .jsx files inside pages/ and export a settings object — no manual route declarations needed.

🚀 Features

🔄 Auto-imports .jsx files from /pages/**
🧠 Configurable routing with settings per page
🗂️ Nested file/folder structure maps directly to routes
🔐 Route-level access control (supports sync and async functions)
⚠️ Custom error pages (404, 500, 401) via errorType
🧩 Optional tab rendering support
🌍 Global variable system usable anywhere: React or plain JS
🧼 Clean, minimal setup — zero boilerplate
🪄 Also available as shortcut: npm i vdp-router

📦 Installation

npm install vite-dynamic-pages-router

or using the shortcut:

npm install vdp-router

📁 File Structure Example

src/
├── App.jsx
├── pages/
│   ├── index.jsx             # Homepage
│   ├── about.jsx             # /about
│   ├── admin/
│   │   └── panel.jsx         # /admin/panel
│   └── errors/
│       ├── Error404.jsx      # 404
│       ├── Error401.jsx      # 401
│       └── Error500.jsx      # 500

🧩 Page Format

Each page exports:

a default React component
a settings object for routing config

function Home() {
  return <h1>Welcome Home</h1>;
}
export default Home;

export const settings = {
  access: true,
  label: "/", // optional
};

⚙️ Settings Reference

Setting	Type	Required	Description
`access`	`boolean` / `function`	✅ Yes	Enables route. Supports logic and async (e.g. `access: async () => {}`).
`label`	string	❌ No	Route path. Defaults to filename. Use `'/'` for homepage.
`tab`	boolean	❌ No	Mark page as part of a tab layout.
`errorType`	`"404"`, `"401"`, etc.	❌ No	Defines the page as fallback for that error type.

🧪 Basic Usage in App.jsx

import { PageRouter } from "vite-dynamic-pages-router";
import { BrowserRouter } from "react-router-dom";

const pages = import.meta.glob("./pages/**/*.jsx", { eager: true });

function App() {
  return (
    <BrowserRouter>
      <PageRouter pages={pages} />
    </BrowserRouter>
  );
}

export default App;

⚠️ Error Pages

Define a 404 page like this:

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}
export default NotFound;

export const settings = {
  access: true,
  errorType: "404",
};

This will automatically be used for any unknown route and available at /__error/404.

🌍 Global Variables – One Function to Rule Them All

You can set global values once, and reuse them anywhere — even in access functions.

✅ In React:

import { global } from "vite-dynamic-pages-router";

function Home() {
  useEffect(() => {
    global("user", { id: 1, role: "admin" });
  }, []);
}

✅ In another component:

import { global } from "vite-dynamic-pages-router";

function Admin() {
  const user = global("user");
  return <h1>Welcome, {user?.username}</h1>;
}

✅ In access logic:

export const settings = {
  access: () => global("user")?.role === "admin",
  label: "admin/panel",
};

✅ From anywhere (non-React):

import { global } from "vite-dynamic-pages-router";

const token = global("authToken");

No need for context, useState, Zustand, or Providers. The global() function uses window.__globals__ internally, so data persists and is available everywhere — as long as it was set.

🔐 Async Access Example

export const settings = {
  access: async () => {
    await new Promise((res) => setTimeout(res, 100));
    return global("user")?.role === "admin";
  },
  label: "admin/panel",
};

🧩 Tabs (Optional)

To use tabs, mark your page with tab: true:

export const settings = {
  access: true,
  label: "dashboard",
  tab: true,
};

Then fetch all tab pages:

import { getTabPages } from "vite-dynamic-pages-router";

const tabs = getTabPages(pages);
// → [{ key, label, Component }]

🛠️ Best Practices

Use label: "/" or index.jsx for homepage
Place error pages in pages/errors/
Set global("user", {...}) as early as possible
Protect routes with access: () => global("user")?.role === "admin"

Made with 💙 by OxiJenuuu