Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
R
react-live-route
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
fukai
react-live-route
Commits
d46573f8
Commit
d46573f8
authored
Jun 27, 2018
by
Wee
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
docs(README): update README
parent
1a7a9783
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
91 additions
and
3 deletions
+91
-3
README.md
README.md
+13
-3
README-zh.md
docs/README-zh.md
+78
-0
No files found.
README.md
View file @
d46573f8
<p
align=
"center"
>
An enhanced version of react-router-v4 Route
. It can keep your Route live on unmatch
path.
An enhanced version of react-router-v4 Route
that keeps Route component live on unmatched
path.
</p>
## ⚠️
## ⚠️
NOT COMPLETED. STILL WORK IN PROGRESS.
NOT FININSHED. STILL WORK IN PROGRESS.
## Document
[
中文
](
./docs/README-zh.md
)
## Install
```
bash
npm install react-live-route
--save-dev
```
## About
...
...
docs/README-zh.md
0 → 100644
View file @
d46573f8
<p
align=
"center"
>
对 react-router-v4 Route 组件的加强版,能够让路由在路径不匹配时隐藏而不卸载。
</p>
## 文档
[
English
](
./docs/README-zh.md
)
## 安装
```
bash
npm install react-live-route
--save-dev
```
## 关于
可以让 Route 在特定路径不匹配的时候隐藏(live)而不 unmount。
举个例子:
一个列表页,点击列表页中的项目会进入详情页,当进入详情页时,列表页会隐藏,当返回列表页时,列表页会恢复到上一次离开时的模样。
## 特点
-
完全兼容 react-router-v4,通过了 react-router-v4 的单元测试
-
侵入性极小,只需引入一个 LiveRoute
-
完全恢复上一次离开页面时的模样(包括滚动位置)
-
简单易懂的 API
## API
### livePath
livePath 为需要隐藏的页面的路由,具体规则与 react-router 中的 Route 的 path props 一样。
例如:List 的路由会在
`/list`
下正常渲染,当进入
`/user/:id`
时会隐藏,当进入这两者以外的页面时会正常卸载。
```
jsx
import
LiveRoute
from
'react-live-route'
<
LiveRoute
path
=
"/list"
livePath
=
"/user/:id"
component
=
{
List
}
/
>
```
### alwaysLive
AlwaysLive 会在路由对应的组件完成第一次初始化后,在其他不匹配的页面下阻止页面的卸载。
例如:Modal 页面在第一次正常渲染之后,进入路径不匹配的页面时隐藏,而在 Modal 页面正常的更新渲染。
```
jsx
import
LiveRoute
from
'react-live-route'
<
LiveRoute
path
=
"/list"
alwaysLive
=
{
true
}
component
=
{
Modal
}
/
>
```
### forceUnmount
🚸 WIP
可以传入一个函数,当这个函数返回值为真时,可以强制路由对应的组件卸载,对应的函数签名为
```
js
(
props
,
params
)
=>
boolean
```
例如:当 user 的 id 为 27 时,List 页对应的组件要卸载掉,而在其他的页面正常渲染。
```
jsx
import
LiveRoute
from
'react-live-route'
<
LiveRoute
path
=
"/list"
livePath
=
"/user/:id"
component
=
{
List
}
forceUnmount
=
{(
props
,
params
)
=>
params
.
id
===
27
}
/
>
```
## Licence
MIT
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment