Question

我们有一些React项目：

营销网站（使用Gatsby v1）
一个网络应用程序（使用CRA和react-router）
组件库（使用react-router）

目前，营销站点（1）和Web应用程序（2）都导入了组件库（3）。

组件库包含样式链接（活动时为粗体），导航栏，页脚，包含页脚的各种布局以及依赖于react-router的Link组件的许多其他组件。这运作良好-为了更新网站Footer，我们发布了新版本的组件库，然后更新了营销网站和Web应用程序。

Gatsby v2已退出，我想升级，但是V2已从react-router切换到@reach/router，因此它目前与组件库不兼容。我还希望能够在市场营销站点中使用Link from Gatsby来启用所有Gatsby特定的增强功能（例如在链接悬停上预加载页面）。

有没有一种方法可以构造/配置我的组件库，以允许根据项目使用不同的Link / Router组件？

一些潜在的选择-

将链接/路由器传递到每个组件中
```
import { Link } from "gatsby"
import { Router } from "@reach/router"
import { Footer } from "my-component-library" 

<Footer link={Link} router={Router}/>
```
传递所有链接/路由器道具有点混乱，并且不确定简单地更换路由器会多么容易-@ reach / router和react-router在内部的行为有所不同（例如，到达的activelink与react-router的NavLink）。
发布使用Gatsby链接的组件库的第二个版本：

例如使用babel-plugin-transform-rename-import
```
import { Footer } from "my-component-library/gatsby"

<Footer/>
```

是否可以一次配置库以使用给定的链接/路由器？

不确定如何运行

import { configure, Footer } from "my-component-library"

// some global config so the library knows to use Gatsby links?
configure({ gatsby: true })

// inside components
<Footer/>

有什么想法吗？

如何在多个项目中共享需要链接/路由器的组件？

0 个答案: