bs-keep-route

1.0.1 • Public • Published

bs-keep-route


由于业务发展需要在两个不同的路由切换后保留之前页面的状态,但是react-route3是独占式路由:即渲染匹配的路由、卸载未匹配的路由且只能渲染一个;react-route4同时支持独占式和非独占式,但是在目前的路由架构中react4一般用Switch启用独占式路由。基于以上情况需要对route进行改造以满足要求


Usage

import {KeepSwitch, KeepRoute} from 'bs-keep-route'
        <KeepSwitch>
          {
            routes.map(({keepLive = false, Component, path, ...dynamics}, key) => {
              return <KeepRoute key={key}
                alwaysLive={true}
                exact
                path={path}
                component={<Component/>}/>
            })
          }
        </KeepSwitch>

TIPS


在目前用Dva框架的情况下,由于他的组件是动态加载导致一开始拿不到路由的DOM引用,这里引入HOC处理一下


import {KeepSwitch, KeepRoute} from 'bs-keep-route'

const HOC = (ComponentCreator) => () => {
    return <div><ComponentCreator/></div>
  }
        <KeepSwitch>
          {
            routes.map(({keepLive = false, Component, path, ...dynamics}, key) => {
              return <KeepRoute key={key}
                alwaysLive={true}
                exact
                path={path}
                component={HOC(dynamic({app, ...dynamics}))}/>
            })
          }
        </KeepSwitch>

优化


不是所有的路由我们都希望保留状态,而且这种保留路由的结构其实会影响应用的表现,所以不需要保留的我们可以卸载启用原生Route组件、反之使用KeepRoute


Readme

Keywords

none

Package Sidebar

Install

npm i bs-keep-route

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

118 kB

Total Files

14

Last publish

Collaborators

  • coderyyx