불변성 실패:외부에서는 사용하지 마십시오.

불변성 실패:외부에서는 사용하지 마십시오.

용 i i i i를 쓴다.react-router-dom을 중입니다.React★★★. 했습니다.내 앱의 일부가 다른 패키지로 추출되었습니다.의존관계 목록은 다음과 같습니다.

./app/syslog/syslog.json

{
  "dependencies": {
    "@app/components": "^1.0.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-router-dom": "^5.0.0"
  }
}

./애플리케이션/컴포넌트/프로세서.json

{
  "peerDependencies": {
    "react-router-dom": "^5.0.0"
  }
}

@app/components가 필요합니다.react-router-dom하다

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router> 
The above error occurred in the <Context.Consumer> component:
Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router>

이러러 는생? ??? 생?? »App.js 용 i i i i를 쓴다.BrowserRouter

import React, { Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Placeholder } from '@app/components';

const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));

const App = () => (
  <Suspense fallback={<Placeholder />}>
    <Switch>
      <Route path="/auth" component={Auth} />
      <Route path="/" component={Index} />
    </Switch>
  </Suspense>
);

export default App;

client.syslogx

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

import App from './App';

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

이 문제는 다음과 같이 변경하여 해결했습니다.

import {Route, Switch} from "react-router";

로.

import {Route, Switch} from "react-router-dom";

-dom을 추가합니다.

테스트 중에 이 문제가 발생하여 테스트 컴포넌트를 라우터로 포장하여 해결했습니다.

import React from 'react';
import ReactDom from 'react-dom';
import Header from '../components/Header/Header';
import { BrowserRouter } from 'react-router-dom';

it('renders Header without crashing', () => {
  const div = document.createElement('div');

  ReactDom.render(
    <BrowserRouter>
      <Header />
    </BrowserRouter>, 
  div);

  ReactDom.unmountComponentAtNode(div);
});

농담, 효소:불변 위반:또는 (Jest를 사용하여) 라우터를 포함하는 컴포넌트를 테스트하려면 컴포넌트 Import {BrowserRouter as Universant Violation}이 아닌 테스트에서 라우터를 Import해야 합니다.Router()를 외부에서 사용하거나 Router()와 함께 사용하지 마십시오.Router 4 docs에 따르면 컴포넌트는 유효한 것으로 간주됩니다.여기서 컴포넌트를 작성한 후 다른 컴포넌트로 Import하여 내부에 배치할 수 있습니다.

2가지 반응 인스턴스의 문제

는 그 하는 것만으로 했습니다.BrowserRouter부에서react-router-dom in 에index.js그리고 추가:추가:

<BrowserRouter>
   <App>
 </BrowserRouter>

범위:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 document.getElementById('root'));

Router 태그에는 Route 태그, Link 태그를 포함해야 합니다.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>Home</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <p>About</p>
    </div>
  );
};

const Contact = () => {
  return (
    <div>
      <p>Contact</p>
    </div>
  );
};
class App extends Component {
  render() {
    return (
        <Router>
              <div>
              <h1>W3Adda - Simple SPA</h1>
                <nav>
                  <ul>
                    <li>
                      <Link to="/">Home</Link>
                    </li>
                    <li>
                      <Link to="/about">About</Link>
                    </li>
                    <li>
                      <Link to="/contact">Users</Link>
                    </li>
                  </ul>
                </nav>

                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" component={Contact} />
              </div>
        </Router>
    );
  }
}

export default App;

나는 이 프로젝트에 연결된 구성 요소를 테스트하는 동안 이 항목을 테스트 중에 있습니다. 스 에 습 니 했 보 다 수 i got입 프 정 를 ( my이 this which duringnpm linkand 그래서 때 그래서react-router-dom다음 솔루션에서 다음 솔루션은 다음과 같이 로드됩니다.여러 번 로딩되었습니다.내 경우는, 다음의 솔루션이 유효합니다.

webpack.config.js붙였습습니니다

resolve: {
    alias: {        
        'react-router-dom': path.resolve('./node_modules/react-router-dom')
    }
}

붙여진 export를 합니다.Router 마찬가지로react-router-dom스위치/루트 컴포넌트에 랩합니다.

const App = () => (
  <Router>
    <Suspense fallback={<Placeholder />}>
      <Switch>
        <Route path="/auth" component={Auth} />
        <Route path="/" component={Index} />
      </Switch>
    </Suspense>
  </Router>
);

Redirect 컴포넌트에서도 같은 문제가 발생하였습니다.알고 보니 리다이렉트를 'react-router-dom'이 아닌 'react-router'에서 불렀습니다.

Error: Invariant failed: You should not use <Redirect> outside a <Router>

CRA로 작성한 메인 앱과 컴포넌트 라이브러리도 비슷한 상황이었습니다. 예가 .react-router-dom독립해서 일해요.의 컴포넌트는 「」를 사용합니다.<Link>에는 「」가 있습니다.<Router>.

@Pavel answer에서 영감을 얻어 에일리어스를 추가하면 문제를 해결할 수 있다는 것을 알게 되었습니다.팩을 사용하고 있는 는, 할 수 .react-router-dom 노드모듈해결순서보다 priority가 수 있습니다.

에일리어스js

const fs = require('fs');
const path = require('path');

const directory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(directory, relativePath);

module.exports = {
  react: resolveApp('node_modules/react'),
  'react-router-dom': resolveApp('node_modules/react-router-dom'),
};

기본 CRA 설정을 덮어쓰기 위해 config-override.js에 의해 사용됩니다.

const { addWebpackAlias, override, removeModuleScopePlugin } = require('customize-cra');
const aliases = require('./aliases');

module.exports = override(removeModuleScopePlugin(), addWebpackAlias(aliases));

또는 webpack.config.js(CRA가 아닌 경우):

resolve: {
  alias: {
    "react-router-dom": path.resolve(appFolder, "node_modules", "react-router-dom"),
 }
}

시 하여 Create React App을 했습니다.<Router></Router에 inside inside inside App.js대대가 instead로Index.js늘 그래왔듯이

이전:

Index.js

ReactDOM.render(
    <React.StrictMode>
        <GlobalStyle />
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
document.getElementById('root')
);

App.js

return (
    <div className="App">
        <Header />
        <Route path="/blabla" component={Whatever}
    </div>
)

그 후:

Index.js:

ReactDOM.render(
    <React.StrictMode>
        <GlobalStyle />
        <App />
    </React.StrictMode>,
document.getElementById('root')
);

App.js:

return (
    <div className="App">
        <Router>
            <Header />
            <Route path="/blabla" component={Whatever}
        </Router>
    </div>
)

MyComponent에서 'react-router-dom'의 종속성을 삭제하여 이 수수께끼 같은 오류를 해결했습니다.node_modules/react-router-dom'과 'package'에서 삭제했습니다.json' My App의 구성은 다음과 같습니다.

    AppFolder
    ├── README.md
    ├── build
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.js
        ├── redux
        │   ├── reducers.js
        │   └── store.js
        └── serviceWorker.js


    MyComponent
    ├── README.md
    ├── dist
    ├── node_modules
    │   ├── react-router-dom
    ├── package-lock.json
    ├── package.json
    ├── rollup.config.js
    └── src
        ├── index.js
        ├── styles.css
        └── test.js

App.js의 소스 코드입니다.

import MyComponent from 'MyComponent'

export default App(){
 return (
 <div className="App">
    <HashRouter>
      <div>
        <header className="App-header">

        </header>
        <Route path="/home" component={MyComponent}/>
      </div>
    </HashRouter>
  </div>)
}

MyComponent에 대한 내보내기입니다.

export default withRouter(MyComponent);

컴포넌트 폴더에 'react-router-dom'이 남아 있으면 오류가 나타납니다.

이 에러는, 부모 컴포넌트를 라우터내에 랩 하는 것으로 해결합니다.

오류 해결 전

<Header />
<div className="col-md-12 pd-0-0">
  <div className="row">
    <Sidebar />
    <div className="col-sm-10 col-md-10 pd-0-0" style={style}>
      <Router>
        <Switch>
          <Route path="/dashboard/check-in" component={CheckIn} />
          <Route path="/dashboard/deals" component={Deals} />
          <Route path="/dashboard/events" component={Events} />
          <Route path="/dashboard/invoice" component={Invoice} />
          <Route path="/dashboard/notification" component={Notification} />
          <Route path="/dashboard/profile" component={Profile} />
          <Route path="/dashboard/redemption" component={Redemptions} />
          <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
        </Switch>
      </Router>
    </div>
  </div>
</div>

에러 해결 후

<Router>
  <Header />
  <div className="col-md-12 pd-0-0">
    <div className="row">
      <Sidebar />
      <div className="col-sm-10 col-md-10 pd-0-0" style={style}>
        <Switch>
          <Route path="/dashboard/check-in" component={CheckIn} />
          <Route path="/dashboard/deals" component={Deals} />
          <Route path="/dashboard/events" component={Events} />
          <Route path="/dashboard/invoice" component={Invoice} />
          <Route path="/dashboard/notification" component={Notification} />
          <Route path="/dashboard/profile" component={Profile} />
          <Route path="/dashboard/redemption" component={Redemptions} />
          <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
        </Switch>
      </div>
    </div>
  </div>
</Router>

루팅을 하고 있는 .이러한 컴포넌트 는 안 .Router는 단일 컴포넌트 .그 컴포넌트는 다음 컴포넌트에 의해 작성된 단일 컴포넌트 또는 단일 컴포넌트만Route아래Router그 컴포넌트에 포함되어 있습니다.

잘못된 코드(단, 실행되지만 버그가 생성됩니다) -

function App() {
  return (
    <div className="App">
      <Header/>
      <Router>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

만 지웁니다.<Header/> , , it solved the issue., 그것은 문제를 해결했다.

코드 쓰기 -

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

그냥 'beak-dom'으로 'beak-dom'을 바꿔서.

import {Route} from "react-router";

로.

import {Route} from "react-router-dom";

GatsbyJS를 사용하고 있는데 이 에러가 발생하는 경우는, 변경해 주세요.

import { Link } from "react-router-dom";

로.

import { Link } from 'gatsby';

이 에러는 react-router와 react-router-dom의 사용방법(with Router, Memory Router)이 혼재되어 발생한 것입니다.react-router-dom의 것만을 사용함으로써 불변의 오차가 사라졌습니다.이게 도움이 됐으면 좋겠네요.

용 방 using<Link>가져온 구성 요소에는 이 오류를 주지 않는 구성 요소에는 져 포 는 포 할 이 생 다 tag 니 습 그 could the' 있 error, importedt the있으 haveBrowserRouter부에서'react-router-dom'

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

링크된 태그를 태그로 감아주세요.

라우터는 컴포넌트 외부에서 사용합니다.라우터 내의 모든 구성요소를 랩하면 구성요소에서 링크를 사용할 수 있습니다.

{ BrowserRouter를 'react-router-dom'에서 라우터, 루트, 스위치로 Import합니다.

<Router>
        <Appbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/mac" exact component={Mac} />
        </Switch>
       <Footer />
      </Router>

I managed to solve the problem by removing 나는 그 문제를 제거함으로써<BrowserRouter>부에서router.js and including it in 그리고 그것을 에 포함시킨다.app.js

export default function  Routes() {
  return (
     
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/book" component={Book} />
        <Route path="/client" component={Client} />
        <Route path="/rent" component={Rent} />
        <Route path="/dash" component={Dash} />
      </Switch>
    
  );
}
function App() {
  return (
    <div>
  
  <BrowserRouter>
    <Header></Header>
    
    <Routes/>
    </BrowserRouter>
    </div>
  );
}

이 문제는 수입으로 해결했습니다.

import {BrowserRouter as Router, Route} from 'react-router-dom';

and wrapped all the 다 싸서Route「 」Router 표시

 <Router>
     <Route exact path='/' component={HomePage} />
 </Router>

Solidus 앱에서 Rails 뷰를 교체하려고 할 때도 비슷한 문제가 있었습니다.

해결책은 방금 추가한 리액트 라우터를 사용하도록 vies를 편집하는 것이었습니다만, 아직 완전히 구성되지 않은 것 같습니다.

예를 들면 제가 편집해서views/spree/home/index.html송신원:

<%= javascript_pack_tag 'application' %>
<%= react_component("Home/Index") %>

대상:

<%= javascript_pack_tag 'application' %>
<%= react_component("Routes") %>

더 참고하기 위해, 여기 제javascript/components/Route.js:

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home/Index";
import Product from "./Products/Show";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Route exact path="/" component={Home} />
        <Route path="/products/:slug" component={Product} />
      </Router>
    );
  };
};

export default Routes;

앱 컴포넌트를 라우터로 래핑할 때도 같은 문제가 발생하였습니다.

오류:

import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route, withRouter } from 'react-router-dom';
import { Placeholder } from '@app/components';

const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));

const App = () => (
  <BrowserRouter>
  <Suspense fallback={<Placeholder />}>
    <Switch>
      <Route path="/auth" component={Auth} />
      <Route path="/" component={Index} />
    </Switch>
  </Suspense>
  </BrowserRouter>
);

export default withRouter(App);

솔루션:

이미 Switch 컴포넌트를 사용하고 있으며, 그 후 Router에서 삭제했습니다.

    import React, { Suspense } from 'react';
    import {BrowserRouter, Switch, Route } from 'react-router-dom';
    import { Placeholder } from '@app/components';
    
    const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth'));
    const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));
    
    const App = () => (
      <BrowserRouter>
      <Suspense fallback={<Placeholder />}>
        <Switch>
          <Route path="/auth" component={Auth} />
          <Route path="/" component={Index} />
        </Switch>
      </Suspense>
      </BrowserRouter>
    );
    
    export default App;

유닛 테스트 중에 이 문제를 겪고 있는 분들을 위해 다음과 같은 작업을 수행했습니다.

function mountComponentWithRouter(Component, props) {
  const Teste = withRouter(prop => <Component {...prop} {...props} />);

  return mount(
    <HashRouter>
      <Teste />
    </HashRouter>,
    {
      context: { router },
      childContextTypes: { router: PropTypes.object.isRequired }
    }
  );
}

내부 반응-라우터-돔 구성 요소Component에는 애플리케이션을 실행할 때 일반적으로 자연스럽게 전달되는 모든 소품(패스명, 해시, 상태, 검색)이 포함됩니다.

가장 간단한 답은 Navbar용 reactstrap 공식 문서 안에 있습니다.이 웹사이트 https://reactstrap.github.io/components/navbar/를 참조하십시오.

그들은 우리가 이 수입품을 사용해야 한다고 안내했다.

import {NavLink} from 'reactstrap';

렌더링 콜의 마지막에 쉼표가 붙어 있습니다.document.getElementById('root').

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

언급URL : https://stackoverflow.com/questions/55552147/invariant-failed-you-should-not-use-route-outside-a-router