在反应中使用 react-router 4 和 styled-component 时，不应在路由器外使用 Route 或 withRouter()

Question

我正在尝试构建我的第一个投资组合网站，但在使用 react-router-dom 4.2.2 和 styled-components 2.2.3 的路由中陷入困境。

错误消息：您不应在路由器外使用 Route 或 withRouter()

我也尝试使用 Link 而不是 NavLink 但也出现错误（您不应该在路由器外使用 Link ）

请有人帮助我。

导航栏.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;

导航栏.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;
`;

Answer 1

确保将主要的 react 渲染代码包装在路由器中。 例如，使用 react-dom，您需要将应用程序包装在 Browser-Router 中。 如果这是一个 Udacity 项目，这通常是 index.js 文件。

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>

  , document.getElementById('root'));

Answer 2

那么你正在使用BrowserRouter / HashRouter的NavLink之外（你使用任何）

你自己说的

你不应该在路由器外使用 Link

确保你有这样的结构

// App render or whatever
render() {
  return (
    <BrowserRouter>
       <NavigationBar />
       {`whatever else you doin'`}
    </BrowserRouter>
  );
}

您必须始终在路由器内渲染它们

Answer 3

一个可能的起源在西班牙语 Stackoverflow 中得到了回答，它是一个打字稿项目。

原帖： https : //es.stackoverflow.com/a/372​​161/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 中删除文件夹。

包.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”来使用打字稿

Answer 4

我卸载了@types/react-router-dom 并重新安装了它。 错误消失了，不知道魔法，但它对我有用。

Answer 5

这可能是由于具有某些集成方法的node_modules项目的node_modules的一些混淆node_modules 。

避免问题的最简单方法是为一个应用程序中集成的所有项目仅保留一个node_modules文件夹。 否则，某些子项目可能会使用同一库的不同版本（例如 React 或 Router 等），它们在内部数据结构（反应上下文等）中可能彼此不兼容，并会带来这样的问题。

Answer 6

这在您使用<Router>时已解决，只需在</Router></AppProvider>之外添加

<BrowserRouter>
    <Switch>
        //sample route
        <Route path="/index" render={(props) => <Index {...props} />} />
    </Switch>
</BrowserRouter>

Answer 7

一个可能的问题是在 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/