介绍

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

App.tsx

import { lazy, useEffect } from 'react'
import { KRouter, IKRouterProps } from '@/kuririn-react-router'
import TabBar from '@/example/components/TabBar'
import PageUserIndex from '@/example/pages/user/index'
import PageDetail from '@/example/pages/detail'
import PageSubDetail from '@/example/pages/subDetail'

export const pagesConfig: IKRouterProps['pages'] = [
  { path: '/', component: lazy(() => import('@/example/pages/index/index')), isTab: true }, // support lazy loading
  { path: '/user', component: PageUserIndex, isTab: true },
  { path: '/detail', title: '详情', component: PageDetail },
  { path: '/subDetail', title: '二级详情', component: PageSubDetail },
  { path: '/userSub', title: 'user的子页面', component: lazy(() => import('@/example/pages/user/useSubPage')) },
]

function App() {
  useEffect(() => {
    console.log('🚀 ~ app launch')
  }, [])
  return (
    <KRouter pages={pagesConfig}>
      <TabBar />
    </KRouter>
  )
}

export default App

效果演示：

屏幕录制2024-01-30 17.41.50 (1).gif

npm地址：https://www.npmjs.com/package/kuririn-react-router

github地址：https://github.com/jiqishoubi/kuririn-react-router/blob/master/README.zh-CN.md

欢迎尝试使用，提issues

React H5路由库kuririn-react-router，可以模拟app页面栈的效果

介绍