javascript - 库中的 React 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

根据您提供的信息，没有明确的信息或证据说明您的代码为何会被破坏。
使用 React-router-dom，你必须将所有的 NavLink、Switch、Route、Link 标签放在你的主 <BrowserRouter> </BrowserRouter> 中。标签。
但是您在问题中显示的示例没有任何问题
页眉.js

import React from "react"
import {NavLink} from "react-router-dom"

const Header = () => {

   return(
       <div>
        <NavLink to="home"> Take Me Home </NavLink>
       </div>
)
}
export default Header

这是 App.js

    import React from "react"
    import Header from "./Header"
    import {BrowserRouter as Router, NavLink} from "react-router-dom"
   // importing BrowserRouter as a Router is not required, it's just standard practice
    
    cosnt App = () => {
       <div>
          <Router>
            <h1> Hello </h1>
            <NavLink to="about"> About </NavLink>
            <Header />
          </Router>
       </div>
    }
    export default App

上面的代码没有任何麻烦，
尽管您的代码应该可以工作，但由于它不起作用，您应该首先再次检查是否有任何错误的导入，错字
如果仍然不起作用，您应该查看 React 版本冲突，始终建议在您的父项目中使用最新版本。