React Routers

⭐ Features

🏠 Installation

🎠 Example & Playground

import{BrowserRouter}from'react-router-dom';import{Routers}from'react-routers';constApp=()=>{return(<BrowserRouterbasename='prefix'><Routersrouters={[{path:'/page',Component:async()=>(awaitimport('./Component')).Component}]}/></BrowserRouter>)}

📑 API

Props ofRouters

routers

interfaceIPageRouter{/**     * route path     */path:string;/**     * document.title, if not set, will use original title in html     */name?:string;/**     * the lazy load Component     */Component?:()=>(Promise<ComponentType<any>>|ComponentType<any>);/**     * children configuration     * - child node will inherit parent node configuration     * - child node configuration has higher priority than parent node configuration     */children?:IPageRouter[];/**     * triggered before entering route     * - if return false, deny to enter route\     * - after `beforeEach`     */beforeRoute?:IBeforeRoute;/**     * triggered after entering route     * - if return false, deny to enter route     * - ahead of `afterEach`     */afterRoute?:IAfterRoute;/**     * maintains component state and avoids repeated re-rendering for the route     * - default is `false`     * - its priority is higher than `keepAlive` in props     */keepAlive?:boolean;/**     * transition animation     */transition?:ITransition;/**     * the path list to prefetch     * - parent node prefetch will be append after current node prefetch     */prefetch?:string[];}

fallback

redirect

beforeEach

afterEach

keepAlive

switchRoute

transition

typeITransition={/**     * the css style after matched     */match:CSSProperties;/**     * the css style after unmatched     */notMatch:CSSProperties;/**     * the css style of transition     */trans:CSSProperties;/**     * keep component after unmatched     * - default is `500`ms     */delay?:number;};

delay

prefetchDelay

Hooks

useActive &useDeactive

import{useActive,useDeactive}from'react-routers';useActive(()=>{/* Called when the component is activated. */});useDeactive(()=>{/* Called when the component is deactivated. */});

useParams &useRouteMatch

import{useParams,useRouteMatch}from'react-routers';// /blog/:slugconst{ slug}=useParams<{slug?:string}>();constmatch=useRouteMatch<{slug?:string}>();

Embedded Animation

💻 Development

🍧 License