taomu-routes

Documentation

Install

npm install taomu-routes
Copy

Import Global Types

in tsconfig.json

{
  "compilerOptions": {
    "types": ["taomu-routes/types"]
  }
}
Copy

Create routes

in src/main.ts

import React from 'react'
import { createRoot } from 'react-dom/client'

import { AutoRoutes, AppRouter } from 'taomu-routes'

// with vite
const routes = new AutoRoutes('main-routes', import.meta.glob('./views/**/routes.(ts|tsx)', { eager: true }))

const root = createRoot(document.getElementById('root')!)

root.render(
  <div>
    <React.StrictMode>
      <AppRouter routes={routes} />
    </React.StrictMode>
  </div>
)
Copy

with rsbuild (webpack)

const pageSource = require.context('@/views', true, /routes\.tsx?$/)
const pageModules: Record<string, any> = {}

pageSource.keys().forEach((key) => {
  pageModules[key] = pageSource(key)
})

const routes = new AutoRoutes('main-routes', pageModules)
Copy

Route Config

in src/views/**/routes.ts

export const autoRoutes: RouteConfig[] = [
  {
    name: 'home',
    path: '/home',
    title: 'Home',
    element: () => import('./home'),
  },
]
Copy

Navigation

You can use 'navigateTo' to navigate to any route from anywhere.

import { routeTools } from 'taomu-routes'

routeTools.navigateToByRouteName('home')

// or

routeTools.navigateTo('/home')
Copy

Link

You can use 'Link' to navigate to any route in AppRouter context.

import { Link } from 'taomu-routes'

const Comp = () => {
  return (
    <div>
      <Link name="home">To Home</Link>
      {/* or */}
      <Link to="/home">To Home</Link>
    </div>
  )
}
Copy

LICENSE

Apache-2.0