库中的 React Router 问题 - 使用 <Router> 之外的元素

Posted 2023-02-22

【中文标题】库中的 React Router 问题 - 使用 <Router> 之外的元素

【英文标题】：React Router issue within library - using elements outside <Router>

【发布时间】：2021-11-03 10:17:58

【问题描述】：

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

Header.tsx

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

请记住，这只是一个示例，以了解我如何使用 react-router-dom 元素。所以在构建和发布这个库之后，我想在我的主要反应项目中使用它，我包含这个 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 版本不同造成的？

【问题讨论】：

我知道当Switch和BrowserRouter都在App组件中时尝试访问useLocation时可能会出现问题，解决方法是将BrowserRouter在 index.js 中。也许这个奇怪的问题会表明相同的修复程序可能对您有用。尝试将BrowserRouter 放入 index.js。

嗯，不幸的是没有帮助:(

你能试试这个问题的答案吗？不知道是什么问题，只是尝试解决方案：***.com/questions/55552147/…

你能把代码和导入语句一起发布吗？

你说你在你的库中使用了不同版本的 React？导入两个版本的 React 通常会破坏你的代码。在您的库中有react 和react-router-dom dependencies 或peerDependencies？

【参考方案1】：

根据您提供的信息，没有明确的信息或证据表明您的代码为何会被破坏。

使用 React-router-dom，您必须将所有 NavLink、Switch、Route、Link 标签放在您的主要 <BrowserRouter> </BrowserRouter> 标签中。

但是您在问题中显示的示例没有任何问题

Header.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 版本冲突，始终建议在您的父项目中使用最新版本。

【参考方案2】：

该错误表示Header组件没有被Router组件包裹。

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

【讨论】：

这可能更适合作为评论

BrowserRouter 是 react-router 中的路由组件。它通常以Router 和import BrowserRouter as Router from 'react-router-dom' 的形式导入，但并非必须如此。

【参考方案3】：

BrowserRouter 可能有问题。

BrowserRouter 应该以<Router> 开头并以</Router> 结尾。 那么你应该正确导入 Header 组件。

【参考方案4】：

是的，在这里输入代码，只需使用<Router></Route> <Navlink> 只是当你想重定向或只是去 URL 时

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案5】：

您也可以使用Router。

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

export const Header: React.FC = () => 
   return(
       <>
        <NavLink to="home"> Take Me Home </NavLink>
       </>
   )
;

import React from 'react';
import  Router  from 'react-router-dom';
import  createBrowserHistory  from 'history';

export const history = createBrowserHistory();

export const App: React.FC = () => 
  return (
      <Router history=history>
        <Header />
        <Routes /> // Your all routes
      </Router>
  );
;

history 将帮助您随时随地推送路由器。在您的组件和实用程序中。

history.push('/about');

history.push(
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: 
    [userDefined]: true
  
);

【参考方案6】：

我建议您仔细检查您的进口。也许您导入了错误的 Header 组件，或者您没有正确导入 BrowserRouter，如上面示例中所述