0.0.2 • Published 2 years ago
vite-plugin-react-autoroutes v0.0.2
vite-plugin-react-autoroutes
一个仿照umiJs的路由方案
Getting Started
// npm
npm install -D vite-plugin-react-autoroutes
// yarn
yarn install -D vite-plugin-react-autoroutes
// pnpm
pnpm install -D vite-plugin-react-autoroutes
Vite Config
Add to your vite.config.js
:
import autoRoute from 'vite-plugin-react-autoroutes';
export default {
plugins: [
// ...
autoRoute({{ pagesDir: 'src/pages/' }}),
],
}
Router.tsx
src/router.tsx
import React, { lazy, Suspense, useEffect } from 'react';
import { BrowserRouter as Router, useRoutes, RouteObject } from 'react-router-dom';
import routes, { parse } from 'react-auto-routes';
const syncRouter = (table: SyncRoute.Routes[]): RouteObject[] => {
let mRouteTable: RouteObject[] = [];
table.forEach((route) => {
mRouteTable.push({
path: route.path,
element: (
<Suspense
fallback={<>Loading</>}
>
<route.element />
</Suspense>
),
children: route.children && syncRouter(route.children),
});
});
return mRouteTable;
};
const Routes = () => {
return useRoutes(syncRouter(parse(routes, lazy)));
};
const SetRoutes = () => {
return (
<Router>
<Routes />
</Router>
);
};
export default SetRoutes