在 react 中使用 react-router 4 和 styled-component 时，不应在 Router 外部使用 Route 或 withRouter()
Posted
技术标签:
【中文标题】在 react 中使用 react-router 4 和 styled-component 时，不应在 Router 外部使用 Route 或 withRouter()【英文标题】：You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react 【发布时间】：2018-04-29 02:22:47 【问题描述】：我正在尝试构建我的第一个投资组合网站，但在使用 react-router-dom 4.2.2 和 styled-components 2.2.3 时遇到了路由问题。
错误消息：您不应在路由器之外使用 Route 或 withRouter()
我也尝试使用 Link 而不是 NavLink，但也出现错误（您不应该在路由器之外使用 Link）
请有人帮助我。
navigationBar.js
import React, Component from 'react';
import NavigationContainer, NavItem from './navigationBar.style';
class NavigationBar extends Component
render()
return (
<NavigationContainer>
<NavItem to="/">Home</NavItem>
<NavItem to="/projects">Project</NavItem>
</NavigationContainer>
);
export default NavigationBar;
navigationBar.style.js
import styled from 'styled-components';
import Flex, Div from 'theme/grid';
import NavLink from 'react-router-dom';
export const NavigationContainer = styled(Flex)`
position: fixed;
right: 20px;
top: 0.5em;
font-size: 1em;
`;
export const NavItem = styled(NavLink)`
position: relative;
padding-left: 10px;
cursor: pointer;
`;
【问题讨论】：
【参考方案1】：一个可能的问题是在 package.json 中同时使用“React Router DOM”和“React Router”。
从技术上讲，它们是三个不同的包：React Router、React Router DOM 和 React Router Native。它们之间的主要区别在于它们的用法。 React Router DOM 用于 Web 应用程序，React Router Native 用于使用 React Native 制作的移动应用程序
https://www.freecodecamp.org/news/react-router-cheatsheet/
【讨论】：
【参考方案2】：当你使用<Router>时解决了这个问题，只需在</Router></AppProvider>之外添加
<BrowserRouter>
<Switch>
//sample route
<Route path="/index" render=(props) => <Index ...props /> />
</Switch>
</BrowserRouter>
【讨论】：
【参考方案3】：这可能是由于在 node_modules 中对采用某些集成方法的 multirepo 项目存在一些混淆。
避免问题的最简单方法是只为一个应用程序中集成的所有项目保留一个node_modules 文件夹。否则，某些子项目可能会使用同一库的不同版本（例如 React 或 Router 等），它们在内部数据结构（反应上下文等）中可能相互不兼容，从而带来这样的问题。
【讨论】：
【参考方案4】：在西班牙语 *** 中回答了一个可能的来源，它是一个打字稿项目。
原帖：https://es.***.com/a/372161/24877
根据 React 文档，这通常是通过复制 React（多个 React 副本）https://reactjs.org/warnings/invalid-hook-call-warning.html
来实现的显然，当使用 npm link 应用程序时，尝试使用项目“react-app”和“react-app-components”中的反应，因此当将其发布到 npm repository 时，错误不再出现。
为了修复它，我从 package.json 中删除了依赖项 react、react-router-dom 并重新运行 npm install 以从 node_modules 中删除文件夹。
package.json
之前：
//...
"license": "ISC",
"devDependencies":
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"babel-loader": "^8.1.0",
"glob": "^7.1.6",
"react": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"source-map-loader": "^1.0.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
,
"peerDependencies":
"react": "^16.13.1",
"react-router-dom": "^5.2.0"
之后：
//...
"license": "ISC",
"devDependencies":
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@types/react": "^16.9.41",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"babel-loader": "^8.1.0",
"glob": "^7.1.6",
"source-map-loader": "^1.0.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.6",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
,
"peerDependencies":
"react": "^16.13.1",
"react-router-dom": "^5.2.0"
我只是留下“@types”来使用打字稿
【讨论】：
【参考方案5】：我卸载了@types/react-router-dom 并重新安装了它。错误消失了，不知道魔法，但它对我有用。
【讨论】：
【参考方案6】：确保将主要的反应渲染代码包装在路由器中。例如，使用 react-dom，您需要将应用程序包装在 Browser-Router 中。如果这是一个 Udacity 项目，这通常是 index.js 文件。
import BrowserRouter from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
【讨论】：
【参考方案7】：您在 BrowserRouter/HashRouter 之外使用 NavLink（无论您使用什么）
你自己说的
你不应该在路由器之外使用链接
确保你有这样的结构
// App render or whatever
render()
return (
<BrowserRouter>
<NavigationBar />
`whatever else you doin'`
</BrowserRouter>
);
您必须始终在路由器中渲染它们
【讨论】：
非常感谢！将以上是关于在 react 中使用 react-router 4 和 styled-component 时，不应在 Router 外部使用 Route 或 withRouter()的主要内容，如果未能解决你的问题，请参考以下文章
在带有 webpack 的 React-Router 中使用嵌套路由的问题