花纹

变化

框架独立路由器 React.
可同时使用Fleur / Redux (redux-thunk).

提供了 Next.js 子集 useRouter

yarn add @fleur/froute

• 特征
• API 概览
  • 钩子
  • 构成部分
• 示例
• Next.js 类似状态
  • 如何使用安全类型

特征

见所有实例 此规格 或者说 实例

• 独立图书馆
  • 与 Redux 和 Fleur 合作
• 下一个.js的路由器子集相容性(useRouter, (中文(简体) ), withRouter(中文(简体) )
• 支持没有代码变压器的动态导入
• 支持 Sever 侧面渲染
  • 支持预装
  • ResponseCode 财务报告和审定财务报表 Redirect 组件
• 自定义路由分辨率( 用于 i18n 支持)
• URL 构建器

API 概览

钩子

• useRouter - 说吧 Next.js 子集相配钩
  • withRouter 可用
• useFrouteRouter - 说吧 useRouter 超级集( 不兼容 Next.js ) useRouter(中文(简体) )
• useRouteComponent
• useBeforeRouteChange(listener: () => Promise<boolean | void> | boolean | void)
  • 它可以阻止路径返回 Promise<false> | false

构成部分

• <Link href={string} />
• <FrouteLink to={routeDef} params={object} query={object} /> - 安全路线
• <ResponseCode status={number} />
• <Redirect url={string} status={number = 302}

开始

路由定义 :

export const routes = {
  index: routeOf('/').action({
    component: () => import('./pages/index'),
  }),
  user: routeOf('/users/:userId').action({
    component: () => import('./pages/user'),
    preload: (store: Store, params /* => inferred to { userId: string } */) =>
      Promise.all([ store.dispatch(fetchUser(param.userId)) ]),
  })
}

应用 :

import { useRouteComponent, ResponseCode } from '@fleur/froute'

export const App = () => {
  const { PageComponent } = useRouteComponent()

  return (
    <div>
      {PageComponent ? (
        <PageComponent /> 
      ) : (
        <ResponseCode status={404}>
          <NotFound />
        </ResponseCode>
      )}
    </div>
  )
}

用户. tsx :

import { useRouter, buildPath } from '@fleur/froute'
import { routes, ResponseCode, Redirect } from './routes'

export default () => {
  const { query: { userId } } = useRouter()
  const user = useSelector(getUser(userId))

  if (!user) {
    return (
      <ResponseCode status={404}>
        <NotFound />
      </ResponseCode>
    )
  }

  if (user.suspended) {
    return (
      <Redirect status={301} url='/'>
        This account is suspended.
      </Redirect>
    )
  }
  
  return (
    <div>
      Hello, {user.name}!
      <br />
      <Link href={buildPath(routes.user, { userId: '2' })}>
        Show latest update friend
      </Link>
    </div>
  )
}

服务器侧 :

import { createRouter } from '@fleur/froute'
import { routes } from './routes'

server.get("*", async (req, res, next) => {
  const router = createRouter(routes, {
    preloadContext: store
  })

  await router.navigate(req.url)
  await context.preloadCurrent();

  const content = ReactDOM.renderToString(
    <FrouteContext router={router}>
      <App />
    </FrouteContext>
  )

  // Handling redirect
  if (router.redirectTo) {
    res.redirect(router.statusCode, router.redirectTo)
  } else{
    res.status(router.statusCode)
  }
  
  const stream = ReactDOM.renderToNodeStream(
    <Html>
      {content}
    </Html>
  ).pipe(res)

  router.dispose()
})

客户端 :

import { createRouter, FrouteContext } from '@fleur/froute'

domready(async () => {
  const router = createRouter(routes, {
    preloadContext: store,
  });

  await router.navigate(location.href)
  await router.preloadCurrent({ onlyComponentPreload: true })

  ReactDOM.render((
      <FrouteContext router={router}>
        <App />
      </FrouteContext>
    ),
    document.getElementById('root')
  )
})

Next.js 类似状态

• 通过兼容 API useRouter 或者说 withRouter
  • 兼容特性
    • query, (中文(简体) ), push(), (中文(简体) ), replace(), (中文(简体) ), prefetch(), (中文(简体) ), back(), (中文(简体) ), reload()
    • pathname ,但 Froute 的路径名没有调整到文件系统路由.
  • 从 Next.js 中未提供的任何类型检查( Froute 已提供,属于相容断开)
• Next.j 不支持的特定函数喜欢 asPath, (中文(简体) ), isFallback, (中文(简体) ), basePath, (中文(简体) ), locale, (中文(简体) ), locales 财务报告和审定财务报表 defaultLocale
  • <Link /> 只有href道具兼容 但行为不兼容.
    • Froute的链接有 <a /> 键。 下一个J不是.
    • as, (中文(简体) ), passHref, (中文(简体) ), prefetch, (中文(简体) ), replace, (中文(简体) ), scroll, (中文(简体) ), shallow 目前不支持.
  • pathname 返回当前 location.pathname,不调整到组件文件路径基础路径名.
  • router.push(), (中文(简体) ), router.replace()
    • 網址 对象不支持当前
    • as 不支持参数
  • router.beforePopState 不支持
    • 使用 useBeforeRouteChange() 换钩子
  • router.events
    • 部分支持: routeChangeStart, (中文(简体) ), routeChangeComplete, (中文(简体) ), routeChangeError
      • 仅 url 或者说 err 参数.
      • 未执行 : err.cancelled 财务报告和审定财务报表 { shallow } 旗帜.
    • 未执行 : beforeHistoryChange, (中文(简体) ), hashChangeStart, (中文(简体) ), hashChangeComplete

为什么Frooute提供Next.js相配钩?

它旨在从反应-路由器或其他路由器迁移到Next.js.

弗劳特的 useRouter 旨在提供 useRouter 与 Next.js 部分兼容 useRouter,从而保证将现有的基于React Router的应用程序迁移到Next.js的中间步骤.

如何使用安全类型

在您的应用程序中使用此片段 . (正在从 Next.js 突破到 Type- Level API 兼容性)

// Copy it in-your-app/useRouter.ts
import { useRouter as useNextCompatRouter } from '@fleur/froute'
export const useRouter: UseRouter = useNextCompatRouter

用法 :

// Route definition
const routes = {
  users: routeOf('/users/:id'),
}

// Typeing to `Routes`, it's free from circular dependency
export type Routes = typeof routes

// Component
import { useRouter } from './useRouter'
import { Routes } from './your-routes'

const Users = () => {
  const router = useRouter<typeof Routes['users']>()
  router.query.id // It infering to `string`.
}