我正在创建一个包含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，库中的React版本是v17。两个项目的路由器版本都是5.3.0。
会不会是不同的反应版本引起的?
没有明确的信息或证据说明为什么你的代码是基于你所给出的信息。
使用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
上面的代码没有任何麻烦，虽然您的代码应该可以工作，但由于它不能工作，您应该首先再次检查导入是否有任何错位，typo
如果仍然不工作，你应该看看React版本冲突，总是建议在你的父项目中使用最新的版本。
这个错误表明Header组件没有被Router组件封装。
你还没有共享BrowserRouter的代码，但是要确保BrowserRouter以<Router>开始，以</Router>结束。
BrowserRouter可能有问题。
BrowserRouter应该以<Router>开始，以</Router>结束。然后你应该正确导入Header组件。
您也可以使用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
}
});
我建议您仔细检查您的进口。也许你导入了错误的Header组件，或者你没有像上面的例子中提到的那样正确导入BrowserRouter
是的，只用<Router></Route><Navlink>只是当你想重定向或直接到URL
我也有同样的问题，这就是我如何解决它。在我的例子中，我使用的是& rollup"要创建react库，为了解决这个问题，我只需要提供libraries "react-router-dom"作为外部依赖项，
我的意思是在rollup.config.js文件中只是更新外部标签与以下值
export default {
entry: 'src/index.js',
dest: 'bundle.js',
format: 'cjs',
external: [ "react-router-dom"]
};
https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency(关于rollup的外部依赖的一点文档)
无论你使用什么工具来生成你的库，检查配置文件中是否有一个选项来提供外部依赖并更新它的值，它应该工作
使用供参考
"react": "18.2.0",
"react-router-dom": "^6.6.1",