外部包中的 React Router v6答案

【问题标题】：React Router v6 in external package外部包中的 React Router v6
【发布时间】：2021-12-26 17:51:52
【问题描述】：

我有一个内部带有反应路由器的应用程序。所有应用程序都由 Router 组件包装。

<Router>
    <Routes>
        <Route path = "/home/" element = { <HomePage />} />
        <Route path = "/desk/" element = { <Desk /> ) />
    </Routes>
</Router>

在我的 Desk 组件中，我从另一个包中导入了我的外部组件 Table，其中包含 Link、useLocation 等。

我必须在 Table 组件中使用 Router 包装所有内容。所以现在我有应用程序中的主路由器和我的库组件中的另一个路由器。在这种情况下，单击浏览器地址栏中的链接更改 url，但它不会使主路由器正确路由组件。

如果我在我的库中删除路由器组件，它会显示错误，例如“useHref() 只能在路由器组件的上下文中使用。”。

你能帮我解决这个问题吗？谢谢！

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

看看这个来自反应路由器文档的例子：

https://v5.reactrouter.com/web/example/nesting

尝试仅保留顶级 Router 包装器并从 Table 内部删除一个

【讨论】：

这是唯一的选择。谢谢！

【解决方案2】：

问题出在 webpack 配置中。它必须是唯一的一个 react-router-dom 组件。我认为是这样，因为我在带有 Table 组件的库的 webpack 配置中添加了“externals”。

但我还必须将它添加到我的主应用程序的 webpack 配置中。

resolve: {
        alias: {
            'react-router-dom': path.resolve('./node_modules/react-router-dom'),
        },
        extensions: ['.js', '.jsx'],
    },

感谢您的帮助！

【讨论】：