bug: 编写react组件demo,用到了react-router@5，code代码报错

[liangskyli]

编写react组件demo,用到了react-router@5，code代码报错

TypeError: (0 , react_router_dom__WEBPACK_IMPORTED_MODULE_12__.withRouter) is not a function

Versions

• dumi:2.2.7
• node:16.14.0
• npm:8.3.1
• OS:windows10
• Browser:chrome

Steps to reproduce

react-router-dom@5：组件使用了 import { withRouter } from 'react-router-dom'; demo 使用这个组件 运行dumi dev 报错

What is Expected?

react旧版都支持，路由5旧版希望也支持

What is actually happening?

[PeachScript]

dumi 本身的路由是基于 react-router@6 的，所以不能像 react 一样支持切换到旧版

对于你的场景：

1. 组件依赖路由系统其实是有待商榷的，应用也有 router，应用引入组件时 router 可能会打架，所以这个实现本身不一定是合适的
2. 如果是特殊场景必须要用，在 dumi 里只剩 npm 别名 + hash router 一种方案，前者是为了和 react-router 包名区分开来避免和框架锁定的版本呢冲突，后者是为了不和 dumi 的 router 打架

[liyatang]

@PeachScript 组件依赖路由系统是不太合理。 但是不一定是组件，如果我的组件库提供一个方法，比如 useMemoRouteMatch，或者基于 react-router 封装了方法 hooks 等也是合理的。

所以我认为应该解决此问题。

[PeachScript]

所以我认为应该解决此问题。

router 本身不能共存也不能降级，特殊场景上面已经提供了解法

[liyatang]

追更，这次带了自己的解决方案。

问题：找不到 useRouteMatch，没法启动。 原因：库依赖了 react-router@5，而 dumi 使用了 react-router@6，没有提供 useRouteMatch 结论：通过 alias + 改 react-router 规避报错。

过程： 解法存在局限性，以下是我的场景，demo 见 https://github.com/liyatang/dumi2-with-react-router5

上下文是 pnpm + monorepo + dumi2 + react-router5，核心点是

• 1 copy react-router@6 的代码放到 packages/react-router 下，并添加方法 useRouteMatch

• 2 .dumirc.ts 添加 alias

---

btw

• 没有采用别名方案。是如果使用别名比如 my-react-router5，那么依赖库的项目都需要加，这显然不是一个很好的方法。
• 以上只是规避报错，能跑起来。实际上 useRouteMatch 在文档上是有问题的，仅此而以，问题不大。