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

English | 简体中文

Kuririn-react-router is a routing library for mobile H5 that can simulate the effect of page stacks in apps (or mini programs), achieve page push, back, and replace, and support browser forward and backward buttons

Demo

In the example, index is the first level page, detail1 is the second level page, and detail2 is the third level page

Demo gif

More detailed demonstration code example

KRouter

Props

prop	description	type	required	default
historyType		`'hash' \| 'browser'`	false	'browser'
pages	all page items	`IPageItem[]`	true	-
page404	404 component		false	-
lazyLoading	lazy loading component	`React.ReactNode`	false	-
children	Usually used to pass in Tabbar, it is a position fixed component	`React.ReactNode`	false	-
closeDocumentFragmentCache	disable the optimization of document fragment caching on the page? This optimization is enabled by default	`boolean`	false	-

export interface IPageItem {
  path: string
  title?: string // Can affect document.title
  component: IPageItemComponent
  isTab?: boolean
}

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