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')
})