Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bert0324/react-routers
🌠 A React Component for quick configuring route
https://github.com/bert0324/react-routers
javascript javascript-library reacr reacr-router-dom react-router router typescript
Last synced: 6 days ago
JSON representation
🌠 A React Component for quick configuring route
- Host: GitHub
- URL: https://github.com/bert0324/react-routers
- Owner: Bert0324
- License: mit
- Created: 2021-01-18T11:47:35.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-29T06:32:47.000Z (almost 4 years ago)
- Last Synced: 2024-11-08T16:48:52.633Z (6 days ago)
- Topics: javascript, javascript-library, reacr, reacr-router-dom, react-router, router, typescript
- Language: TypeScript
- Homepage:
- Size: 1020 KB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Routers
React Routers
🌠 A React Component for quick configuring route
## ⭐ Features
- Static Routes like [`react-router-config`](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config)
- Route Guard and `keep-alive` like `Vue`
- Auto Lazy Load
- Easy **prefetch**
- Simple Transition Animation
- Change `document.title` with Configuration
- Tiny Size, unpacked 13KB
- Full Typescript Support
## 🏠 Installation
- `yarn add react-routers`
## 🎠 Example & Playground
```tsx
import { BrowserRouter } from 'react-router-dom';
import { Routers } from 'react-routers';
const App = () => {
return (
(await import('./Component')).Component
}
]}
/>
)
}
```
A playground of `react-routers` in [HERE](https://stackblitz.com/edit/react-routers-demo).
## 📑 API
### Props of `Routers`
#### `routers`
The Router configuration, the path in children will be jointed with the path in parent. Its type is as below:
```ts
interface IPageRouter {
/**
* route path
*/
path: string;
/**
* document.title, if not set, will use original title in html
*/
name?: string;
/**
* the lazy load Component
*/
Component?: () => (Promise> | ComponentType);
/**
* 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`
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`
redirect path.
#### `beforeEach`
triggered before entering route
- if return false, deny to enter route
- ahead of any `beforeRoute`
#### `afterEach`
triggered after entering route
- if return false, deny to enter route
- after any `afterRoute`
#### `keepAlive`
do maintains component state and avoids repeated re-rendering for each route
- default is `false`
#### `switchRoute`
Do select only one route like ``
- default is `true`
#### `transition`
transition animation. Its type is as below:
```ts
type ITransition = {
/**
* 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.
#### `delay`
loading delay
- default is `100`ms
#### `prefetchDelay`
how much time delayed to start prefetch after main thread is idle
- default is `0` ms
### Hooks
#### `useActive` & `useDeactive`
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.
```ts
import { useActive, useDeactive } from 'react-routers';
useActive(() => {
/* Called when the component is activated. */
});
useDeactive(() => {
/* Called when the component is deactivated. */
});
```
#### `useParams` & `useRouteMatch`
A wrapped function of [`useParams`](https://reactrouter.com/web/api/Hooks/useroutematch) & [`useRouteMatch`](https://reactrouter.com/web/api/Hooks/useroutematch)
As `react-router` don't have the configuration configured in `react-routers`, if you want to get params in route, you should use this hook.
```ts
import { useParams, useRouteMatch } from 'react-routers';
// /blog/:slug
const { slug } = useParams<{ slug?:string }>();
const match = useRouteMatch<{ slug?:string }>();
```
### Embedded Animation
The object which can be put in `transition`, includes `Fade`, `LeftFade`, `RightFade`, `TopFade`, `BottomFade`, `LeftSlide`, `RightSlide`, `TopSlide`, `BottomSlide`.
## 💻 Development
- `yarn`
- `preview=true yarn dev`
- `yarn build`
## 🍧 License
React Routers is [MIT licensed](https://github.com/Bert0324/react-routers/blob/main/LICENCE).