在 react 中使用 react-router 4 和 styled-component 时，你不应该在路由器外部使用

我正在尝试构建我的第一个投资组合网站，但使用 react-router-dom 4.2.2 和样式组件 2.2.3 进行路由。

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

我也尝试使用链接而不是导航链接，但也遇到了错误(您不应该在路由器外部使用链接(

请有人帮我。

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

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

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

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
  , document.getElementById('root'));

好吧，你在BrowserRouter/HashRouter之外使用NavLink(无论你使用什么(

你自己说的

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

确保你有这样的结构

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

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

一个可能的起源在西班牙语中回答 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"的反应，因此当将其发布到npm repository时，错误不再出现。

为了修复它，我删除了依赖项react，从package.json 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"来处理打字稿

这可能是由于

具有某些集成方法的多存储库项目的node_modules存在一些混淆的结果。

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

当你

使用<Router>时，这个问题就解决了，只需添加外部</Router></AppProvider>

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

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

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

相关内容

最新更新

热门标签：