- Notifications
You must be signed in to change notification settings - Fork1
🌠 A React Component for quick configuring route
License
Bert0324/react-routers
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🌠 A React Component for quick configuring route
- Static Routes like
react-router-config - Route Guard and
keep-alivelikeVue - Auto Lazy Load
- Easyprefetch
- Simple Transition Animation
- Change
document.titlewith Configuration - Tiny Size, unpacked 13KB
- Full Typescript Support
yarn add react-routers
import{BrowserRouter}from'react-router-dom';import{Routers}from'react-routers';constApp=()=>{return(<BrowserRouterbasename='prefix'><Routersrouters={[{path:'/page',Component:async()=>(awaitimport('./Component')).Component}]}/></BrowserRouter>)}
A playground ofreact-routers inHERE.
The Router configuration, the path in children will be jointed with the path in parent. Its type is as below:
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[];}
A fallback react tree to show when a Suspense child (like React.lazy) suspends, and before entering the route. It must be a React Component.
redirect path.
triggered before entering route
- if return false, deny to enter route
- ahead of any
beforeRoute
triggered after entering route
- if return false, deny to enter route
- after any
afterRoute
do maintains component state and avoids repeated re-rendering for each route
- default is
false
Do select only one route like<Switch>
- default is
true
transition animation. Its type is as below:
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;};
or directly use embedded animation objects.
loading delay
- default is
100ms
how much time delayed to start prefetch after main thread is idle
- default is
0ms
The hook triggered when the component's active state has changed.
WHEN DO YOU NEED IT?
- If a component is set as
keepAlive, and you want to trigger something when the component is activated.
import{useActive,useDeactive}from'react-routers';useActive(()=>{/* Called when the component is activated. */});useDeactive(()=>{/* Called when the component is deactivated. */});
A wrapped function ofuseParams &useRouteMatch
Asreact-router don't have the configuration configured inreact-routers, if you want to get params in route, you should use this hook.
import{useParams,useRouteMatch}from'react-routers';// /blog/:slugconst{ slug}=useParams<{slug?:string}>();constmatch=useRouteMatch<{slug?:string}>();
The object which can be put intransition, includesFade,LeftFade,RightFade,TopFade,BottomFade,LeftSlide,RightSlide,TopSlide,BottomSlide.
yarnpreview=true yarn devyarn build
React Routers isMIT licensed.
About
🌠 A React Component for quick configuring route