Package Exports

kuririn-react-router
kuririn-react-router/dist/es/index.js
kuririn-react-router/dist/lib/index.cjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (kuririn-react-router) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Welcome to kuririn-react-router

kuririn-react-router 是一个用于 H5 的路由库，它可以模拟 App（或小程序）中页面栈的效果，实现页面的前进、后退、跳转，支持浏览器的前进、后退按钮

演示

例子中，index 是一级页面,detail1 是二级页面，detail2 是三级页面

演示 gif

更加详细的演示代码 example

KRouter

Props

属性	说明	类型	是否必填	默认值
historyType	路由方式	`'hash' \| 'browser'`	false	'browser'
pages	全部的页面	`IPageItem[]`	true	-
page404	可以传入 404 页面		false	-
lazyLoading	page 懒加载的时候的 loading	`React.ReactNode`	false	-
children	一般用于传入 Tabbar，都是 position fixed 的组件	`React.ReactNode`	false	-
closeDocumentFragmentCache	是否关闭 page 的文档碎片缓存优化，这个优化默认是开启的	`boolean`	false	-

export interface IPageItem {
  path: string
  title?: string // 可影响 document.title
  component: IPageItemComponent
  isTab?: boolean
}

入口文件App.tsx

import { KRouter } from '@/kuririn-react-router'
import TabBar from '@/TabBar'
import PageDetail1 from '@/pages/detail1/index'
import PageDetail2 from '@/pages/detail2/index'
import PageUserIndex from '@/pages/user/index/index'
import { lazy } from 'react'

const PageIndex = lazy(() => import('@/pages/index/index'))

function App() {
  return (
    <>
      <KRouter
        pages={[
          { path: '/', component: PageIndex, isTab: true },
          { path: '/detail1', component: PageDetail1 },
          { path: '/detail2', component: PageDetail2 },
          { path: '/detail2', component: PageDetail2 },
          { path: '/user', component: PageUserIndex, isTab: true },
        ]}
      >
        <TabBar />
      </KRouter>
    </>
  )
}

export default App

useRouter

import { useRouter } from 'kuririn-react-router'

const router = useRouter()

router.push

router.push('/detail1')

router.back

router.back()
router.back(-1)

router.replace

router.replace('/detail2')

router.switchTab

router.switchTab('/')
router.switchTab('/user')

onPageShow、onPageHide

import { onPageShow, onPageHide } from 'kuririn-react-router'

onPageShow(props, () => {
  console.log('🚀 ~ ', 'index page show')
})

onPageHide(props, () => {
  console.log('🚀 ~ ', 'index page hide')
})