800 Bytes router hook for Fre and React
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 模式
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 /> }function App(){ const result = useRoutes(routes) return result || <NotFound /> }useRoutes 返回一个组件，这个组件会根据 pathname 和 routes 的 key 匹配
如果匹配不到，可以事先准备一个全局的 404 组件 √
重定向，只需要将 routes 对象的 value 变成需要重定向的 路径字符串 即可
const routes = { '/': '/home', '/home': Home, }如上，当匹配到跟路径，会跳转到 home 路径，并渲染 home 组件
方便跳转，默认也对外暴露了一个 A 组件，作用和 Link 组件一样：
<A href='/home/jack'>Go jack</A>标签属性和 a 标签一样，只是默认做了阻止冒泡
MIT ©132yse, inspired by routerhook