不要打我!
唉,我也是迫不得已,准备重构我们的 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 地址:
欢迎 star 与试用!