Commit 32b529fa by Wee

docs(README): update README

parent 59afcc90
<p align="center">
An enhanced version of react-router-v4 Route that keeps Route component live on unmatched path.
</p>
## ⚠️
NOT FININSHED. STILL WORK IN PROGRESS.
An enhanced version of react-router-v4 Route that keeps Route component alive on unmatched path and recover it completely.
## Document
......@@ -19,29 +12,53 @@ npm install react-live-route --save-dev
## About
可以让 Route 在特定路径不匹配的时候隐藏(live)而不 unmount。
It can keeps component of route hidden (alive) instead of unmout when the path is not match. There are a few APIs provided to control the life cycle of component.
举个例子
Example
一个列表页,点击列表页中的项目会进入详情页,当进入详情页时,列表页会隐藏,当返回列表页时,列表页会恢复到上一次离开时的模样。
We have a list page, click on the items in the list page will enter the details page, when entering the details page, the list page will be hidden, when returning to the list page, the list page will revert to the last time you left.
## Features
- 完全兼容 react-router-4
- 侵入性极小,只需引入一个 LiveRoute
- 完全恢复上一次离开页面时的模样
- 超简单的 API
- ✅ Fully compatible with react-router-4, all passed the react-router-v4 unit tests.
- 📦 Completely restored the last time you left the page (scroll position included).
- 🎯 Minimally invasive, all you need to do is importing a LiveRoute.
- ✌️ Blazing easy API.
## Usage
## API
### livePath
LiveRoute 需要隐藏的页面的路由,规则与 react-router 的 path 一样。
`livePath` is the path of the page that needs to be hidden. The specific rules are the same as `path` props of Route in react-router-v4.
Example:
The route of List will be rendered normally under `/list`, and it will be hidden when entering `/user/:id`, and it will be unmounted normally when entering other pages.
```jsx
import LiveRoute from 'react-live-route'
<LiveRoute path="/list" livePath="/user/:id" component={List}/>
```
### alwaysLive
`alwaysLive` will block the unmount life cycle under other unmatched pages after the corresponding component of the route completes the first mount.
Example:
After the first normal rendering, the Modal page is hidden when the path is not matched, and will be re-render when match again.
```jsx
<LiveRoute livePath={} ... />
import LiveRoute from 'react-live-route'
<LiveRoute path="/list" alwaysLive={true} component={Modal}/>
```
### ⚠️ Notice
- If a route uses LiveRoute and the parent route of the current route is unmounted, then whether or not the LiveRoute is the current matching livePath will be unmounted. This is determined by the top-down design principle of React. You can use LiveRoute to declares a parent route to solve this problem.
## Licence
MIT
\ No newline at end of file
<p align="center">
对 react-router-v4 Route 组件的加强版,能够让路由在路径不匹配时隐藏而不卸载。
</p>
react-router-v4 Route 组件的加强版,可以使路由在路径不匹配时隐藏而不卸载。
## 文档
......@@ -15,7 +12,7 @@ npm install react-live-route --save-dev
## 关于
可以让 Route 在特定路径不匹配的时候隐藏(live)而不 unmount
可以让 Route 在特定路径不匹配的时候隐藏(live)而不被卸载,react-live-route 提供了几种保持组件的 API 用来控制组件的存活情况
举个例子:
......@@ -23,18 +20,20 @@ npm install react-live-route --save-dev
## 特点
- 完全兼容 react-router-v4,通过了 react-router-v4 的单元测试
- 侵入性极小,只需引入一个 LiveRoute
- 完全恢复上一次离开页面时的模样(包括滚动位置)
- 简单易懂的 API
- ✅ 完全兼容 react-router-v4,通过了 react-router-v4 的单元测试。
- 📦 完全恢复上一次离开页面时的模样(包括滚动位置)。
- 🎯 侵入性极小,只需引入一个 LiveRoute。
- ✌️ 简单易懂的 API。
## API
### livePath
livePath 为需要隐藏的页面的路由,具体规则与 react-router 中的 Route 的 path props 一样。
`livePath` 为需要隐藏的页面的路径,具体规则与 react-router 中的 Route 的 `path` props 一样。
例如:
例如:List 的路由会在 `/list` 下正常渲染,当进入 `/user/:id` 时会隐藏,当进入这两者以外的页面时会正常卸载。
List 的路由会在 `/list` 下正常渲染,当进入 `/user/:id` 时会隐藏,当进入这两者以外的页面时会正常卸载。
```jsx
import LiveRoute from 'react-live-route'
......@@ -44,9 +43,9 @@ import LiveRoute from 'react-live-route'
### alwaysLive
AlwaysLive 会在路由对应的组件完成第一次初始化后,在其他不匹配的页面下阻止页面的卸载。
`alwaysLive` 会在路由对应的组件完成第一次初始化后,在其他不匹配的页面下阻止页面的卸载。
例如:Modal 页面在第一次正常渲染之后,进入路径不匹配的页面时隐藏,而在 Modal 页面正常的更新渲染。
例如:Modal 页面在第一次正常渲染之后,进入路径不匹配的页面时隐藏,而在 Modal 路径匹配时更新渲染。
```jsx
import LiveRoute from 'react-live-route'
......@@ -72,6 +71,10 @@ import LiveRoute from 'react-live-route'
<LiveRoute path="/list" livePath="/user/:id" component={List} forceUnmount={(props, params)=> params.id === 27}/>
```
## ⚠️ 注意
- 如果某路由使用了 LiveRoute,如果当前路由的上层路由被卸载了,那么不管这个 LiveRoute 是不是当前匹配 livePath,都将被卸载,这是由 React 自顶向下的设计原则决定的,你可以使用 LiveRoute 声明父路由来解决这个问题。
## Licence
MIT
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment