@@ -24,35 +24,43 @@ You also can scan the QR code of the demo above to experience it on mobile devic
npm install react-live-route --save-dev
```
or
```bash
yarn add react-live-route --dev
```
## About
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.
It will hide component of route instead of unmout it when the path is not match and restore it when come back. There are a few APIs provided to control the hidden condition 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.
There is a item list page, click on the items on this page will enter the item detail page. When entering the detail page, item list page will be hidden and it will keep hidden when you are on item detail page. Once back to the list page, the list page will be restored to the last state of leaving.
## Features
- ✅ 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.
- ✅ Fully compatible with react-router-v4, all passed the react-router-v4 unit tests.
-🎯 Completely restored to the state of the last time you left (scroll position included).
-🔒 Minimally invasive, all you need to do is import LiveRoute.
- ✌️ Super easy API.
## ⚠️ Caveat
## Caveat ⚠️
- LiveRoute **SHOULD NOT** be wrapped by `Switch` directly, because `Switch` only render the first matched component so that LiveRoute may be directly skipped.
- If a route uses LiveRoute and the parent route of the current route is unmounted, then it will be unmounted whether or not livePath is match. This is determined by the top-down design principle of React. You can use LiveRoute to declares a parent route to solve this problem or stop nestting the router.
- LiveRoute **SHOULD NOT** be wrapped by `Switch` directly, cause `Switch` only render the first matched child element so that LiveRoute may be skipped directly. You can move LiveRoute from `Switch` to the outside.
- If LiveRoute's parent route is unmounted on current location, then it will also 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 or stop nestting the router.
## API
## Usage
### livePath
`livePath` is the path of the page that needs to be hidden instead of unmounted. The specific rules of `livePath` are the same as `path` props of Route in react-router-v4. You still can use `component` or `render` props to render a component.
`livePath` is the path you want to hide the component instead of unmount it. The specific rules of `livePath` are the same as `path` props of Route in react-router-v4. You still can use `component` or `render` props to render a component.
LiveRoute will re-render when it come back from a `path` matching location from the `livePath` matching location. It will unmount on other unmatched locations.
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 location.
The route of List will be rendered normally under `/list`, and it will be hidden when location change to `/user/:id`, and it will be unmounted normally when entering other locations.
```jsx
importLiveRoutefrom'react-live-route'
...
...
@@ -62,11 +70,11 @@ import LiveRoute from 'react-live-route'
### alwaysLive
`alwaysLive` is just like `livePath`. It will be re-render when goes back to match location. But the difference is the component will not be unmount on **any other location** after the first mount.
`alwaysLive` is just like `livePath`. The difference is the component will not be unmount on **any other location** after the it's first mount.
Example:
After the first mount on match location, the Modal page will be hidden when the path is not matched, and will be re-render when match again.
After the first mount on match location, the Modal page will be hidden when the path is not matched, and will re-render when `path` match again.
```jsx
importLiveRoutefrom'react-live-route'
...
...
@@ -76,4 +84,4 @@ import LiveRoute from 'react-live-route'
