react-route-view v1.0.0

react-route-view

A Higher-Order Route component with guard hooks.

Online Demo

react-route-view 是什么

react-route-view 是具有守卫钩子的路由高阶组件。

路由初始化流程

路由切换流程

内部流程

导航流程

┌───────────────────────┐
│     push / replace    │
└──────────┬────────────┘
┌──────────┴────────────┐
│     匹配路由           │
└──────────┬────────────┘
┌──────────┴────────────┐
│     beforeEach        │
└──────────┬────────────┘
┌──────────┴────────────┐
│     beforeEnter       │
└──────────┬────────────┘
┌──────────┴────────────┐
│     渲染已匹配的组件    │
└──────────┬────────────┘
┌──────────┴────────────┐
│     afterEach         │
└──────────┬────────────┘
┌──────────┴────────────┐
│     afterEnter        │
└───────────────────────┘

安装

tnpm i react react-router@5 history@4 react-route-view --save

API

create

配置参数定义：

import {Location, History, UnregisterCallback} from 'history';
import {match, RouteComponentProps} from 'react-router';

export interface IRouteInfo {
  name: string;
  location: Location;
  history: History;
  match: match;
  query: object;
  meta?: any;
}

export type Next = (done?: boolean) => void;
export type NextRedirect = (location?: string | Location) => void;
export type NextError = (err?: Error) => void;

export type BeforeEnter = (to: IRouteInfo, from: IRouteInfo, next: Next | NextError | NextRedirect) => void;
export type AfterEnter = (to: IRouteInfo, from: IRouteInfo) => void;

export type ConnectionRouteComponent = (route: RouteComponentProps) => React.ReactComponentElement;
export type ConnectionFn = (
  component: React.FC | React.Component, 
  config: {
    beforeEnter: BeforeEnter | BeforeEnter[],
    afterEnter: AfterEnter | AfterEnter[]
  }
) => ConnectionRouteComponent;

export interface ICreatedResult {
  connect: ConnectionFn;
  unlisten: (history: History) => UnregisterCallback;
}

export interface IRouteViewProps {
  onError: ErrorHandler;
  propsFromRoute: RouteComponentProps,
  component: React.Component,
  beforeHooks: BeforeEnter[],
  afterHooks: AfterEnter[]
}

export type ErrorHandler = (err: Error, props: IRouteViewProps) => void;

export function create(config: {
  onError: ErrorHandler;
  beforeEach: BeforeEnter | BeforeEnter[],
  afterEach: AfterEnter | AfterEnter[]
}): ICreatedResult;

创建一个具有守卫钩子的路由高阶组件，包含以下实例属性：

connect

返回一个高阶组件在路由匹配后会进入守卫钩子函数

type ConnectionRouteComponent = (route: RouteComponentProps) => React.ReactComponentElement;

connect(
  component: React.FC | React.Component, 
  config: {
    beforeEnter: BeforeEnter | BeforeEnter[],
    afterEnter: AfterEnter | AfterEnter[]
  }
) => ConnectionRouteComponent;

unlisten

移除对 history 的监听

RouteView

配置参数定义：

import {RouteComponentProps} from 'react-router';
export interface IRouteViewProps {
  onError: ErrorHandler;
  propsFromRoute: RouteComponentProps,
  component: React.Component,
  beforeHooks: BeforeEnter[],
  afterHooks: AfterEnter[]
}

export type ErrorHandler = (err: Error, props: IRouteViewProps) => void;

export const RouteView: React.Component<IRouteViewProps, any>;

使用

参见 示例