@wonder-ui/router NPM

@wonder-ui/router

基于react-router-dom@5封装的 moble-router

npm install --save @wonder-ui/router

Example

import * as React from 'react';
import { HashRouter as Router, Routes } from '@wonder-ui/router';

export default function App(){
  return (
    <HashRouter>
      <Routes routes={[
      {
        path: '/index',
        //component: Welcome,
        //async: () => Promise<Welcome>
        element: <Welcome/>,
        children: [
          {
            path: 'citys',
            async: ()=>import('./pages/Citys')
          },
          {
            path: 'picker',
            async: ()=>import('./pages/Picker')
          },
        ]
      },
    ]}/>
    </HashRouter>
  )
}

export interface PartialRouteObject {
  path: string;
  exact?: boolean;
  element?: React.ReactNode;
  component?: React.ComponentType;
  async?: () => Promise<React.ComponentType>;
  children?: PartialRouteObject[];
}


export interface RoutesProps {
  routes: PartialRouteObject[];
  animation?: 'slide' | 'fade' | 'scale';
  animationDisabled?: boolean;
  noMatch?: React.ReactNode;
  onRouteChange?: (location: Location, action: string) => void;
}

hooks

export interface Location {
  hash?: string;
  query?: object;
  search?: string;
  pathname: string;
  state?: any;
}

export function useLocation(): Location;

export function useLocationExact(): Location;

export function usePageEffect(
  callback: () => (() => any) | void,
  vars: any[]
): void;

export function useNavigation(): {
  goBack: () => void;
  goForward: () => void;
  push: (loc: string | Partial<Location>, state?: any) => void;
  replace: (loc: string | Partial<Location>, state?: any) => void;
};