react-router 4 및 styled-component in react를 사용할 때는 라우터 외부에서 Route 또는 withRouter()를 사용하지 마십시오.

react-router 4 및 styled-component in react를 사용할 때는 라우터 외부에서 Route 또는 withRouter()를 사용하지 마십시오.

첫 번째 포트폴리오 웹사이트를 구축하려고 하는데 리액트-라우터-돔 4.2.2와 스타일-컴포넌트 2.2.3을 사용하여 루팅을 하게 되었습니다.

오류 메시지:라우터 외부에서 Route 또는 with Router()를 사용하지 마십시오.

NavLink 대신 Link를 사용하려고 했지만 오류도 발생하였습니다(라우터 외부 링크 사용 안 함).

누가 좀 도와주세요.

네비게이션 Bar.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.

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을 사용하는 경우 앱을 Browser-Router로 래핑해야 합니다.Udacity 프로젝트일 경우 일반적으로 index.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"에서 react를 사용하여 응용 프로그램을 게시할 때npm repository에러가 발생하지 않게 되었다.

그것을 고치기 위해 나는 의존관계를 없앴다.react,react-router-dom패키지로부터.json 및 재실행npm install폴더를 node_module에서 삭제합니다.

패키지.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"를 두고 타이프스크립트로 작업합니다.

@types/react-router-dom을 제거하고 다시 설치했습니다.오류가 사라졌어요, 마법은 모르겠지만, 제게는 효과가 있었어요.

이것은, 에 있어서의 몇개의 혼란의 결과일 가능성이 있습니다.node_modules일부 통합 접근 방식을 사용하는 멀티리포 프로젝트의 경우.

문제를 회피하는 가장 간단한 방법은 1개만 유지하는 것입니다.node_modules모든 프로젝트를 하나의 애플리케이션에 통합하기 위한 폴더입니다.그렇지 않으면 일부 서브프로젝트에서는 내부 데이터 구조(반응 컨텍스트 등)에서 서로 호환되지 않는 동일한 라이브러리의 다른 버전(React 또는 Router 등)을 사용할 수 있으며 이러한 문제가 발생할 수 있습니다.

, 용, 을, 용, 용, 용, 결을 사용하면 해결이 .<Router> outside, outside, outside, outside를 합니다.</Router></AppProvider>

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

생각할 수 있는 문제 중 하나는 package.json에서 'React Router DOM'과 'React Router'를 동시에 사용하는 것입니다.

기술적으로는 리액트라우터, 리액트라우터 DOM 및 리액트라우터 네이티브의 3가지 패키지가 있습니다.이 둘의 주요 차이점은 사용법에 있습니다.React Router DOM은 웹 어플리케이션용, React Router Native는 React Native로 만든 모바일 어플리케이션용입니다.

https://www.freecodecamp.org/news/react-router-cheatsheet/

언급URL : https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route