https://github.com/away0x/react-router-helper

react router helper
https://github.com/away0x/react-router-helper

middleware react react-router react-router-config typescript

Last synced: 16 days ago
JSON representation

react router helper

• Host: GitHub
• URL: https://github.com/away0x/react-router-helper
• Owner: Away0x
• Created: 2020-04-26T05:53:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:26:11.000Z (about 2 years ago)
• Last Synced: 2024-12-25T09:14:18.187Z (16 days ago)
• Topics: middleware, react, react-router, react-router-config, typescript
• Language: TypeScript
• Homepage:
• Size: 3.11 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Router Helper

> 类似 react-router-config，可以以配置形式生成路由

## Install

```bash

npm install --save aw-react-router-helper

```

## Types

```typescript

type RoutesRenderFun = () => React.ReactNode;

interface RouteState {

  path: string;

  meta: Meta;

  url: string;

}

interface RouteConfig {

  // 路径

  path: string;

  // 存储一些路由的额外信息

  meta?: Meta;

  // 重定向 route path

  redirect?: string;

  // 路由的展示组件 (二选一，且必须有其一)

  component?: React.ComponentType> | React.ComponentType;

  render?: (props: RouteConfigComponentProps) => React.ReactNode;

  // 中间件 (路由渲染的拦截器)

  middlewares?: RouteMiddlewareFunc[];

  // 子路由

  routes?: RouteConfig[];

}

interface RouteConfigComponentProps extends RouteComponentProps {

  // 路由配置信息

  route: RouteConfig;

  // 渲染子路由的方法

  renderRoutes: RoutesRenderFun;

}

type RouteMiddlewareFunc = (params: RouteState) => undefined | JSX.Element | string;

type RouteLoadOptions = {

  configs: RouteConfig[];

  middlewares?: RouteMiddlewareFunc[];

}

interface IRouterHelper {

  load(options: RouteLoadOptions): IRouterHelper;

  render(routes?: RouteConfig[]): JSX.Element | null;

}

```

## Examples

- [base](examples/src/base.tsx)

- [auth](examples/src/auth.tsx)

***