Question

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

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

我也尝试使用Link而不是NavLink但也遇到错误（你不应该使用路由器外的链接）

有人帮助我。

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;
`;

Answer 1

确保将主反应渲染代码包装在路由器中。例如，使用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 （无论您使用的是什么）

你自己说了

您不应使用路由器外的链接

确保您拥有这样的结构

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

您必须始终在路由器中呈现它们

Answer 3

可能的来源是西班牙Stackoverflow（一个打字稿项目）中的答案。

原始帖子：https://es.stackoverflow.com/a/372161/24877

根据React文档，通常是通过复制React（复制多个React）https://reactjs.org/warnings/invalid-hook-call-warning.html

来实现的

显然，在使用npm link应用程序时，请尝试使用“ react-app”和“ react-app-components”项目中的react，因此将其发布到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”以使用打字稿

Answer 4

这可能是由于node_modules中采用了某些集成方法的多仓库项目造成了一些困惑。

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

Answer 5

使用<Router>时就解决了，只需在</Router></AppProvider>之外添加

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

Answer 6

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

Answer 7

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

在使用react-router 4和styled-component进行响应时，不应在路由器外使用Route或withRouter（）

7 个答案: