为了全面 hooks，我写了 use-routes ……

不要打我！

唉，我也是迫不得已，准备重构我们的 react 应用，但是总得有个理由

所以准备全面移除 class ，切换 hooks，这不是真的必须滴，只是，尿性使然嘿嘿

其实 hooks 和 class 是完全不一样的感觉，hooks 取新的状态，是执行完这个函数，得到新状态

class 重新 new 可就啥也没了(⊙o⊙)…

所以，我就写了个路由 2333

好像没啥因果关系，但是得益于 hooks 的运行机制，history 路由再也不怕刷新刷新啦(⊙o⊙)…

所以，ur 就不需要 hash ~不要问我 hash 哪里不好，颜值颜值！

Use

import React from 'react'
import ReactDOM from 'react-dom'
import { useRoutes, push, A } from './router'

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

const App = () => useRoutes(routes)

ReactDOM.render(<App />, document.getElementById('root'))
复制代码

以上，包含了基本的用法(⊙o⊙)…

routes 是个对象，key 为 正则字符串，value 为组件，如果 value 也是路径字符串，那就会进行跳转

然后默认还提供了 push 方法和 A 组件，push 就是负责跳转的，A 组件相当于 react-router 的 Link 组件

然后可以在组件内，useRoutes 一下，就可以啦(⊙o⊙)…

然后，然后就没有然后啦(⊙o⊙)…

很多人问我为啥不用 use-react-router，你猜

就这样……

有了路由，就真的可以开干了，同时，use-routes 也支持 fre 的哈，嗯当我没说

最后，送上 github 地址：

github.com/132yse/use-…

欢迎 star 与试用！

转载于:https://juejin.im/post/5c94e3676fb9a070c975a1ba