在使用react-router 4和styled-component进行响应时,不应在路由器外部使用Route或withRouter()

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

那么您使用的是NavLink的外BrowserRouter/HashRouter(你使用任何)

你自己说的

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

确保你有这样的结构

// 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”来处理打字稿