Gyron.js 文档

此文档中描述的类型需要使用 npm 下载之后查看，在这里只描述出参数的种类和返回值。如果你有时间和精力欢迎加入我们完善文档。

createRouter

创建一个 Router，然后通过<Router router={/* ... */}>方式使用。

返回值

返回Plugin<RouterBase>类型对象。

类型声明

declare function createRouter(option: Partial<RouterOption>): Plugin<RouterBase>

示例

import { createBrowserHistory } from 'history'
import { createInstance } from 'gyron'
import { createRouter, Router, Route, Routes } from '@gyron/router'

const router = createRouter({
  history: createBrowserHistory(),
})

createInstance(
  <Router router={/* router */}>
    <Routes>
      <Route path="" strict element={<Welcome />}></Route>
      <Route path="user" element={<User />}>
        <Route path=":id">
          <Route path="member" element={<Member />}></Route>
          <Route path="setting" element={<Setting />}></Route>
        </Route>
      </Route>
      <Route path="*" element={<Mismatch />}></Route>
    </Routes>
  </Router>
).render(document.getElementById('root'))

createBrowserRouter

创建 history 模式的 Router，其作用就是合并了createRouter和createBrowserHistory。

示例

import { createBrowserHistory } from 'history'
import { createRouter } from '@gyron/router'

const router = createRouter({
  history: createBrowserHistory(),
})

createHashRouter

创建 hash 模式的 Router，其作用就是合并了createRouter和createHashHistory。

示例

import { createHashHistory } from 'history'
import { createRouter } from '@gyron/router'

const router = createRouter({
  history: createHashHistory(),
})

createMemoryRouter

创建 memory 模式的 Router，使用此模式可以在服务端环境下创建 Router。其作用就是合并了createRouter和createMemoryRouter。

示例

import { createMemoryRouter } from 'history'
import { createRouter } from '@gyron/router'

const router = createRouter({
  history: createMemoryRouter(),
})

Routes

Router 路由的入口，用于管理和收集 Route 组件。更多信息可以参阅声明式路由

类型声明

declare const Routes: ComponentSetupFunction<object, false>

示例

import { FC } from 'gyron'
import { Router, Routes, Route } from '@gyron/router'

const App = FC(() => {
  return (
    <Router router={/* router */}>
      <Routes>
        <Route path="/" element={<span>Home</span>} />
      </Routes>
    </Router>
  )
})

Route

声明式路由的承载容器。更多信息可以参阅声明式路由

类型声明

declare const Route: ComponentSetupFunction<
  Partial<
    Omit<RouteRecord, 'extra'> & Omit<RouteRecordExtra, keyof RouteTransfer>
  >,
  false
>

示例

import { FC } from 'gyron'
import { Router, Routes, Route } from '@gyron/router'

const App = FC(() => {
  return (
    <Router router={/* router */}>
      <Routes>
        <Route path="/" element={<span>Home</span>} />
      </Routes>
    </Router>
  )
})

Link

导航组件，实际会渲染成一个 a 标签。更多信息可以参阅导航

类型声明

declare const Link: ComponentSetupFunction<LinkProps, false>

示例

import { FC } from 'gyron'
import { Link } from '@gyron/router'

const Navigation = FC(() => {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  )
})

Outlet

嵌套路由的承载容器。更多信息可以参阅嵌套渲染(Outlet)

类型声明

declare const Outlet: ComponentSetupFunction<object, false>

示例

import { FC } from 'gyron'
import { Link, Outlet } from '@gyron/router'

export const Layout = FC(() => {
  return (
    <div>
      <div>
        <Link to="/docs">文档</Link>
        <Link to="/helper">帮助</Link>
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  )
})

Redirect

重定向路由，一般用来解决路由更替后连接地址未更新的问题。更多信息可以参阅重定向

类型声明

declare const Redirect: ComponentSetupFunction<RedirectProps, false>

示例

import { FC } from 'gyron'
import { Router, Redirect } from '@gyron/router'

const App = FC(() => {
  return (
    <Router router={/* router */}>
      <Routes>
        <Redirect path="oldPath" redirect="newPath"></Redirect>
      </Routes>
    </Router>
  )
})

useRouter

在组件中获取 Router 对象的方法。

类型声明

declare function useRouter(): RouterBase

示例

import { FC } from 'gyron'
import { useRouter } from '@gyron/router'

const App = FC(() => {
  const router = useRouter()
  const login = () => {
    router.push('/login')
  }
  return <button onClick={login}>Login</button>
})

useRoutes

配置路由方法，接受一个RouteRecordConfig类型的数组。

类型声明

declare function useRoutes(routes: RouteRecordConfig[]): VNode<VNodeType>

示例

import { FC } from 'gyron'
import { useRoutes } from '@gyron/router'

const App = FC(() => {
  return useRoutes([
    {
      path: '',
      strict: true,
      element: <Welcome />,
    },
    {
      path: 'user',
      element: <User />,
      children: [
        {
          path: ':id',
          children: [
            {
              path: 'member',
              element: <Member />,
            },
            {
              path: 'setting',
              element: <Setting />,
            },
          ],
        },
      ],
    },
    {
      path: '*',
      element: <Mismatch />,
    },
  ])
})

useRoute

获取当前匹配的路由。

类型声明

declare function useRoute(): Primitive<RouteRecord>

示例

import { FC } from 'gyron'
import { useRoute } from '@gyron/router'

const Dashboard = FC(() => {
  const route = useRoute()
  route.value // RouteRecord
  return <div>Dashboard</div>
})

useHref

格式化路由 path，支持传入Path参数，将其转换成一个 string。

类型声明

declare function useHref(to: To): string

示例

import { useHref } from '@gyron/router'

const path = useHref({
  pathname: '/user',
  search: '?id=admin',
})
// /user?id=admin

useParsePath

将 string path 转换成 object path。

类型声明

declare function useParsePath(path: string): Partial<history.Path>

示例

import { useParsePath } from '@gyron/router'

const path = useParsePath('/user?id=admin')
/**
 * {
 *   pathname: '/user',
 *   search: '?id=admin',
 * }
 */

useParams

获取当前路由上正则匹配的参数。

类型声明

declare function useParams(): TypeParamsRaw

示例

import { FC } from 'gyron'
import { useParams } from '@gyron/router'

const Dashboard = FC(() => {
  const params = useParams()
  return <div>Dashboard</div>
})

useOutlet

获取当前路径下匹配的嵌套路由。

类型声明

declare function useOutlet(): TypeOutletRaw

示例

import { FC } from 'gyron'
import { useOutlet } from '@gyron/router'

const Dashboard = FC(() => {
  const outlet = useOutlet()
  /**
   * {
   *   matches: RouteRecord[];
   *   depth: number;
   * }
   */
})

useMatch

判断传入的 path string 是否被匹配。

类型声明

declare function useMatch(path: string): boolean

示例

import { FC } from 'gyron'
import { useMatch } from '@gyron/router'

const Dashboard = FC(() => {
  const matched = useMatch('/dashboard')
})

onBeforeRouteEach

路由发生变更之前触发，第三个参数next可以改变路由跳转的目标。

类型声明

declare function onBeforeRouteEach(listener: RouterHookBeforeEach): void

示例

import { FC } from 'gyron'
import { onBeforeRouteEach } from '@gyron/router'

const App = FC(() => {
  onBeforeRouteEach((from, to, next) => {
    next()
  })
  return <div></div>
})

onBeforeRouteUpdate

路由发生变更之前触发，和第一个有所不同的是只有当路由变更之后当前组件还被匹配的路由包裹才会触发。

类型声明

declare function onBeforeRouteUpdate(listener: RouterHookBeforeUpdate): void

示例

import { FC } from 'gyron'
import { onBeforeRouteUpdate } from '@gyron/router'

const App = FC(() => {
  onBeforeRouteUpdate((from, to) => {
    // ...
  })
  return <div></div>
})

onAfterRouteEach

路由发生变更之后触发，可以在这里面做一些清理的工作。

类型声明

declare function onAfterRouteEach(listener: RouterHookAfterEach): void

示例

import { createRef, nextRender, FC } from 'gyron'
import { onAfterRouteEach } from '@gyron/router'

const App = FC(() => {
  const ref = createRef()
  onAfterRouteEach((from, to) => {
    nextRender().then(() => {
      ref.current // div
    })
  })
  return <div ref={ref}></div>
})

onAfterRouteUpdate

路由发生变更之后触发，和onBeforeRouteUpdate一样，路由变更之后组件未被销毁时触发。

类型声明

declare function onAfterRouteUpdate(listener: RouterHookAfterUpdate): void

示例

import { FC } from 'gyron'
import { onAfterRouteUpdate } from '@gyron/router'

const App = FC(() => {
  onAfterRouteUpdate((from, to) => {
    // ...
  })
  return <div></div>
})

页面导航栏

createRouter

createBrowserRouter

createHashRouter

createMemoryRouter

Routes

Route

Link

Outlet

Redirect

useRouter

useRoutes

useRoute

useHref

useParsePath

useParams

useOutlet

useMatch

onBeforeRouteEach

onBeforeRouteUpdate

onAfterRouteEach

onAfterRouteUpdate