写过过 Angular 和 Vue 后,才发现 React router dom 真的不行.

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1751 days ago, the information mentioned may be changed or developed.

之前没写过 React,今天我才知道 React router dom 不是官方维护的,结果是一个卖教程的维护的,怪不得打着 React training 的 title...

是不是把一个 router 库写得简单易用,扩展性强大,且符合人类直觉的话,培训就卖不出去了?

我上一个帖子问有什么好用的 react router dom 的路由守卫,结果并没有.

我尝试了自己封装,在 react router dom 的基础上,

但是写出来的代码我感觉就是一坨屎,任凭我怎么封装,我看着这些诡异的 api 都觉得恶心.

后来我又了解到,react router dom 的作者认为,为了其灵活性,不能过度封装,问题是灵活易扩展和简单易用多功能可以做到不冲突...

如果只是提供如此简单的路由功能,我感觉我不如自己解析 url,进行条件渲染...

我觉得这不是灵活,这是完全就是简陋...直接把 history 这些玩意儿暴露给使用者,

没有 interceptor 式的路由守卫,没有命名路由,嵌套路由的写法也很诡异,

这到底是封装了个什么...

没搞懂为什么这个 lib 在 github 上关注度这么高,

不过还好,我终于找到一个符合我使用直觉的,且还在维护的 router 库了...

universal-router

Supplement 1 · Jul 28, 2021

最后还是用了一个朋友推荐的 reach-router 的方案.

reach-router 开篇文档有一句话,很有意思:

"Reach Router and it’s sibling project React Router are merging as React Router v6. In other words, Reach Router v2 and React Router v6 are the same. There is more information on the maintainers website."

现在看来 React Router V6 是难产了,上一次的 commit 已经是好久以前了,而且现在还是 beta.

22 replies • 2021-07-29 10:50:46 +08:00

Smash

Jul 27, 2021

React+tsx 这两天带给我非常畅快的编码体验,唯一让我觉得吃了苍蝇一样恶心的就是使用了 react router dom.

seki

Jul 27, 2021

我先替楼下的说一句：react 就是不行，还是 jquery 最好用
--------

虽然我也承认 react-router 挺反人类的（最新的还没发布的 v6 会改善不少）
但是你说的这些基本上只是需要在 react 里面需要换个写法能实现
所谓的「直觉」应该只是习惯命令式的写法了

Smash

Jul 27, 2021

@seki 也许是习惯问题吧,不过我个人觉得 next.js 的约定式路由也挺人性化和复合直觉的.

BigJi

Jul 27, 2021

@seki 哈哈。

wuchangming89

Jul 27, 2021

react-router 和 redux 都不喜欢。个人感觉给 react 减分

golangLover

Jul 27, 2021 via Android

@Smash 你只是喜欢 php，手动斜眼

ruoxie

Jul 27, 2021

因为 react 里万物皆组件，至于你说的问题，可以看下 umijs 是怎么封装的

Cbdy

Jul 27, 2021 via Android

路由其实没啥东西，自己监听 popstate 做一个简单的路由库也很简单

ruanyu1

Jul 27, 2021 via iPhone

说的真有点过分了，开源作者和维护者提供技术咨询，再正常不过了。

而且在开喷之前先了解下别人为什么这样设计，不是只有你一种 use case 。react router 相较于之前版本最大改变是去中心化路由，可以看看这里的解释，里面介绍了为什么这样设计。https://reactrouter.com/web/guides/philosophy

接触新东西都有一个从陌生到熟悉的过程，希望不要遇到问题就来发牢骚。

yushiro

Jul 28, 2021 via iPhone

就像刚接触 dva，对于 effect 之类的用法很不习惯，直到看到一篇文章，讲这种方案背后的思想，才明白别人这样设计是实践某种理论，只是用的人不懂而已。作为技术从业者，还是需要多学习。

zxCoder

Jul 28, 2021 via Android

提到 react，粉丝们总会有很多新名词，新设计，新概念

danhua

Jul 28, 2021

@yushiro 文章可以推荐一下么，最近刚好在看 dva 。

lqzhgood

Jul 28, 2021

@yushiro 听起来文章不错我也想看看还能找到么？

zenwong

Jul 28, 2021

早已换成自己的 router，几行就实现基本功能，可以自己试试。

yushiro

Jul 28, 2021 via iPhone

@danhua
@lqzhgood
原来那篇文章还没找到，但这篇可以参考
背后的数学原理是“代数效应”
https://zhuanlan.zhihu.com/p/169805499

myCupOfTea

Jul 28, 2021

react router dom 我也觉得不是很好用
但是 nextjs 我也觉的不太行,封装过渡,内部业务要做一些复杂的自定义路由,react-router-dom 我还可以实现,但是 nextjs 的就算了吧

Austaras

Jul 28, 2021

别听楼上讲代数效应的瞎吹，都是扯淡的

react-router 的问题不是在于维护者跑路了吗？ beta 都 beta 一年了还一大堆 bug，准备什么时候 release 啊?

kssss

Jul 28, 2021

试试 umijs

Smash

Jul 28, 2021

@kssss umijs 可以,可惜开工没有回头箭...迁移陈本太高,不想重新把项目从 vite 构建迁移到 umi 了,最后还是用了一个朋友推荐的 reach-router 的方案.

reach-router 开篇文档有一句话,很有意思:

"Reach Router and it’s sibling project React Router are merging as React Router v6. In other words, Reach Router v2 and React Router v6 are the same. There is more information on the maintainers website."

现在看来 React Router V6 是难产了,上一次的 commit 已经是好久以前了,而且现在还是 beta.

mxT52CRuqR6o5

Jul 29, 2021 via Android

你这么一说我也觉得某些角度用起来体验没另两家好，我是没明白 useRouteMatch 返回的 path 和 url 到底有什么区别

IvanLi127

Jul 29, 2021

确实不怎么好用的样子。。。不知道是不是 Angualr 和 Vue 写惯了，思维没转变过来

yazoox

Jul 29, 2021

@yushiro 文章能分享一下么？