库内的 React Router 问题 - 使用 <Router> 外部的元素

Question

我正在创建一个包含react-router-dom依赖项的库。有一些组件我正在使用react-router-dom NavLink，例如，我们将其命名为 Header -

Header.tsx

export const Header = () => (
  <div>
    <NavLink to="/home">Home</NavLink>
  </div>
);

请记住，这只是一个示例，用于了解我如何使用react-router-dom元素。因此，在构建和发布这个库之后，我想在我的主 React 项目中使用它，其中包含这个 Header 组件，并且我有一个父 BrowserRouter 包装器，所以它看起来像这样 -

App.tsx

export const App = () => (
  <BrowserRouter>
    <Header />
  </BrowserRouter>
);

但它没有渲染页面，而是给出以下错误：

Invariant failed: You should not use <NavLink> outside a <Router>

有什么想法可能是错误的以及如何解决这个问题吗？React 版本在父项目中为 16，在库中为 v17。两个项目中的路由器版本均为 5.3.0。

难道是react版本不同造成的？

Answer 1

该错误表明 Header 组件未被 Router 组件包装。

您尚未共享 BrowserRouter 代码，但请确保 BrowserRouter 以 开头<Router>并以 结尾</Router>。