kuririn-react-router v3.0.0

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

演示

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

演示 gif

更加详细的演示代码 example

KRouter

Props

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