Custom route with class decorator or function, automatic sorting and support nested routes. Based on react-router-dom.
基于 react-router-dom 封装，使用类装饰器或函数配置路由，自动排序，支持嵌套路由。
$ npm install --save react-router-decorator
or
$ yarn add react-router-decorator
or
$ pnpm add react-router-decorator
Use class decorator (TC39 Proposal)
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}{
"plugins": [
["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
"@babel/plugin-proposal-class-properties"
]
}or
{
"presets": ["@babel/preset-env"],
"plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
}import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
babel: {
parserOpts: {
plugins: ['decorators-legacy'],
},
},
}),
],
});import React from 'react';
import { NavigateFunction, RouteObject } from 'react-router-dom';
/**
* 组件上可设置属性用于开启或关闭 `withPageWrapper` `childrenAsOutlet` 优先级最高
*/
export interface Extra {
withPageWrapper?: boolean;
childrenAsOutlet?: boolean;
}
/**
* 支持的其他的 RouteObject
*/
export type PickRouteObject = Omit<RouteObject, 'Component' | 'path' | 'children'>;
/**
* 页面级组件
*/
export type PageComponent = React.ComponentType<any> & Extra;
/**
* 解析 url search 参数
*/
export type Query = {
readonly [key: string]: undefined | string | string[] | Query | Query[];
};
/**
* 路由参数
*/
export type Params = {
readonly [key: string]: string | undefined;
};
/**
* 注册页面路由时额外的参数
*/
export interface PageDefine {
title?: string | ((params: Params, query: Query) => string);
context?: string;
lazy?: boolean;
}
/**
* 被默认 PageWrapper 包裹的页面自动解析的参数
*/
export interface WithWrappedProps {
query: Query;
params: Params;
navigate: NavigateFunction;
path: string;
children?: React.ReactNode;
}
export interface PageWrapperProps extends PageDefine {
path: string;
Component: PageComponent;
childrenAsOutlet?: boolean;
}
export type PageWrapperType = React.ComponentType<PageWrapperProps>;
export type RouteOption = Omit<PageWrapperProps, 'childrenAsOutlet'> & PickRouteObject;
export type PageOptions = (PageDefine & PickRouteObject) | string;
export interface RenderOptions {
/**
* 路由类型
*/
type?: 'hash' | 'history';
/**
* App Wrapper
*/
Wrapper?: React.ComponentType<any>;
/**
* 使用默认 Page Wrapper
*/
withPageWrapper?: boolean;
/**
* 自定义 Page Wrapper
*/
PageWrapper?: PageWrapperType;
/**
* 使用 children 代替 Outlet
*/
childrenAsOutlet?: boolean;
/**
* 开启调试模式，控制台输出路由信息
*/
debug?: boolean;
/**
* 开启路由辅助工具
*/
helper?: boolean;
}instead of ReactDOM.render(<App/>, element).
Type: HTMLElement, the ReactDOM.render root element.
Type: RenderOptions
use class decorator to register route.
Type: string , "/" or "*"
Type: PageOptions, if typeof PageOptions is string it's mean document title.
use function to register route.
Type: PageComponent
Type: string , "/" or "*"
import React from 'react';
import { page, $page, Outlet, NavLink, renderApp } from 'react-router-decorator';
// 主路由
@page('/')
class PageIndex extends React.Component {
render () {
return <div>首页</div>
}
}
// 父路由
@page('/user', { title: '用户页面' })
class PageUser extends React.Component {
render () {
return <>
<div>User</div>
<Outlet/>
</>
}
}
// 嵌套路由指定 context
@page('/:id', { title: '用户详情', context: '/user' })
class PageUserInfo extends React.Component {
render () {
return <div>user info</div>
}
}
// 同一个组件多个路由（类似有权限控制的场景）
@page('/normal/management', { title: '普通' })
@page('/management', { title: '高级' })
class PageManagement extends React.Component {
render () {
return <div>Management</div>
}
}
// 404路由
@page('*', { title: '404页面' })
class Page404 extends React.Component {
render () {
return <div
<div>404</div>
<NavLink to='/'>返回首页</NavLink>
</div>
}
}
const FuncComponent = () => {
return <div>函数组件</div>
};
// 注册函数组件
$page(FuncComponent, '/fun1');
$page(FuncComponent, '/fun2');
// 入口等价于 ReactDOM.render
renderApp(document.getElementById('app'));import React from 'react';
import { createRoot } from 'react-dom/client';
import { AppRouter, AppRoutes, MemoryRouter } from 'react-router-decorator';
// render AppRouter
createRoot(document.getElementById('app')).render(<AppRouter type={'hash'} />);
// render AppRoutes
createRoot(document.getElementById('app')).render(
<MemoryRouter>
<AppRoutes />
</MemoryRouter>,
);- PageWrapper
const CustomPageWrapper: PageWrapperType = (props: PageWrapperProps) => {
const { Component, ...others } = props;
// do something
return <Component />;
};withPageWrapper: false
import React from 'react';
const Component = () => {
const params = useParams();
const id = params.id;
return <>{id}</>;
};
$page(Component, '/test/:id');withPageWrapper: true
import React from 'react';
const Component = ({ params, query }) => {
// 内置 PageWrapper 提供的能力
const id = params.id;
return <>{id}</>;
};
$page(Component, '/test/:id');childrenAsOutlet: false
@page('/user', { title: '用户页面' })
class PageUser extends React.Component {
render() {
return (
<>
<div>User</div>
<Outlet />
</>
);
}
}
// 嵌套路由指定 context
@page('/:id', { title: '用户详情', context: '/user' })
class PageUserInfo extends React.Component {
render() {
return <div>user info</div>;
}
}childrenAsOutlet: true
@page('/user', { title: '用户页面' })
class PageUser extends React.Component {
render() {
return (
<>
<div>User</div>
{this.props.children}
</>
);
}
}
// 嵌套路由指定 context
@page('/:id', { title: '用户详情', context: '/user' })
class PageUserInfo extends React.Component {
render() {
return <div>user info</div>;
}
}lazy (since 0.2.0)
import { lazy } from 'react';
import { $page, renderApp } from 'react-router-decorator';
const LazyComponent = lazy(() => import('./pages/lazy'));
$page(LazyComponent, '/lazy', { lazy: true });
renderApp(document.getElementById('app'));
import { AppRouter, DevRouterHelper, PageWrapper } from 'react-router-decorator';
const CustomPageWrapper: FC<PageWrapperProps> = (props) => {
return (
<>
{/* 这里可以写页面公共的代码，如导航头部 */}
{process.env.NODE_ENV === 'development' && <DevRouterHelper />}
<PageWrapper {...props} />
</>
);
};
const App = () => {
return (
<>
{/* 这里可以增加app级别的代码，如使用antd ConfigProvider 包裹 */}
<AppRouter PageWrapper={CustomPageWrapper} debug={process.env.NODE_ENV === 'development'} />
</>
);
};Support the Data APIs.
import { DataRouter, useNavigation, $page } from 'react-router-decorator';
const Home = () => {
const navigation = useNavigation();
};
$page(Home, '/');
const App = () => {
return (
<>
{/* 这里可以增加app级别的代码，如使用antd ConfigProvider 包裹 */}
<DataRouter debug={process.env.NODE_ENV === 'development'} helper />
</>
);
};