use-routes

800 Bytes router hook for Fre and React

Use

import { h, render } from 'fre'
import { useRoutes, push } from 'use-routes'

const routes = {
  '/': () => (
    <div>
      <p>home</p>
      <button onClick={() => push('/home/jack')}>Go jack</button>
    </div>
  ),
  '/home/:id': ({ id }) => (
    <div>
      <p>{id}</p>
      <button onClick={() => push('/')}>Go home</button>
    </div>
  ),
}

const App = () => useRoutes(routes)

render(<App />, document.getElementById('root'))

以上，首先定义一个路由的对象，key 为正则路径，value 为组件

只 history 模式

React

use-routes 同时适用于 fre 和 react，但默认是服务于 fre 的

如果想要用于 react，可以通过 webpack 配置别名

resolve: {
  alias: {
    'fre': 'react'
  }
}

import React from 'react'
import { useRoutes } from 'use-routes'

function App(){
  const result = useRoutes(routes)
  return result || <NotFound />
}

useRoutes

function App(){
  const result = useRoutes(routes)
  return result || <NotFound />
}

useRoutes 返回一个组件，这个组件会根据 pathname 和 routes 的 key 匹配

如果匹配不到，可以事先准备一个全局的 404 组件 √

redirect

重定向，只需要将 routes 对象的 value 变成需要重定向的 路径字符串 即可

const routes = {
  '/': '/home',
  '/home': Home,
}

如上，当匹配到跟路径，会跳转到 home 路径，并渲染 home 组件

A link

方便跳转，默认也对外暴露了一个 A 组件，作用和 Link 组件一样：

<A href='/home/jack'>Go jack</A>

标签属性和 a 标签一样，只是默认做了阻止冒泡

License

MIT ©132yse, inspired by routerhook