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

IT技术 javascript reactjs react-router styled-components
2021-04-09 03:28:59

我正在尝试构建我的第一个投资组合网站,但在使用 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;
`;
6个回答

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

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

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

  , document.getElementById('root'));

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

你自己说的

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

确保你有这样的结构

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

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

路由器可能只有一个子元素
2021-06-04 03:28:59
你救了我的一天
2021-06-08 03:28:59
非常感谢!将 <Switch> 更改为 <div> 后,您的答案有效。在我的代码中,<BrowserRouter> 中的 <Switch> 在哪里。我感觉好些了。再次感谢!
2021-06-11 03:28:59
@MuhammadUmer 我知道。但我只是证明他应该将他的组件封装在路由器中
2021-06-20 03:28:59

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

原帖: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”中的react,因此当将其发布到npm repository错误不再出现时。

为了修复它,我从 package.json 中删除了依赖项reactreact-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”来处理typescript

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

这可能是由于对node_modules具有某些集成方法的多仓库项目造成的一些混淆

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