불변 위반:a 밖에서 사용하면 안 된다.

불변 위반:a 밖에서 사용하면 안 된다.

어떻게 풀어야 할지 모르는 문제가 있어서, npm 테스트를 할 때 이런 오류가 발생함

불변 위반:사용해서는 안 된다.<Switch>a 밖에<Router>

문제는 무엇이고 내가 어떻게 해결할 수 있을까?내가 실행하는 테스트는 반응과 함께 제공되는 표준 app.test.js이다.

class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      </div>
    );
  }
};

오류가 정확하다.이제 끝장을 봐야죠.Switch와 함께BrowserRouter또는 이와 같은 다른 대안HashRouter,MemoryRouter왜냐하면BrowserRouter그리고 대안으로는 모든 라우터 구성요소를 위한 공통의 낮은 수준의 인터페이스가 있으며 HTML 5를 사용한다.historyAPI, 그리고 당신은 당신의 경로를 왔다 갔다 하기 위해 이것이 필요하다.

차라리 이렇게 해 봐.

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

그리고 이렇게 모든 것을 싸서

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

Ract Router devs에 따르면 이를 처리하는 적절한 방법은 라우터에서 장치 테스트를 마무리하는 것이다.사용.MemoryRouter테스트 사이에 라우터를 재설정할 수 있도록 권장된다.

당신은 여전히 다음과 같은 일을 할 수 있다.

<BrowserRouter>
  <App />
</BrowserRouter>

그럼 안으로App:

<Switch>
  <Route />
  <Route />
</Switch>

당신의 유닛이 다음에 대해 테스트를 한다.App보통 다음과 같은 것이 될 수 있다.

const content = render(<App />); // Fails Unit test

유닛 테스트를 다음으로 업데이트:

const content = render(<MemoryRouter><App /></MemoryRouter>); // Passes Unit test

항상 BrowserRouter를 Navigations 구성 요소에 넣으십시오. 예를 따르십시오.

import React, { Component } from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Route, NavLink, Switch } from 'react-router-dom'

var Componente1 = () => (<div>Componente 1</div>)
var Componente2 = () => (<div>Componente 2</div>)
var Componente3 = () =>  (<div>Componente 3</div>)

class Rotas extends Component {
    render() {

        return (
                <Switch>
                    <Route exact path='/' component={Componente1}></Route>
                    <Route exact path='/comp2' component={Componente2}></Route>
                    <Route exact path='/comp3' component={Componente3}></Route>
                </Switch>
        )
    }
}


class Navegacao extends Component {
    render() {
        return (

                <ul>
                    <li>
                        <NavLink to="/">Comp1</NavLink>
                    </li>
                    <li>
                        <NavLink exact  to="/comp2">Comp2</NavLink>
                    </li>
                    <li>
                        <NavLink exact to="/comp3">Comp3</NavLink>
                    </li>
                </ul>
        )
    }
}

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Navegacao />
                    <Rotas />
                </div>
            </BrowserRouter>
        )
    }
}

render(<App/>, document.getElementById("root"))

참고: BrowserRouter는 하위 요소를 하나만 허용한다.

중첩된 모든 구성 요소에서 올바른 가져오기를 수행하십시오.그 중 하나가 리액터-루터-돔 대신 리액터-루터로부터 Switch를 가져오면 이 오류가 발생할 수 있다.모든 것을 '반응-라우터-도메인'(반응-라우터 컴포넌트를 어쨌든 재수출하는 것)과 일관성을 유지한다.확인 대상:

"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

내가 한 방법은 에 대한 의존성을 업데이트하는 것이었습니다.yarn add react-router-dom또는npm install react-router-domnode_datastore 폴더를 삭제하고 실행 중yarn또는npm install다시 한 번

나는 같은 문제에 직면하고 있었다.react-router-dom에서 BrowserRouter 가져오기 및 코드 작성 시 해결됨

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>

react-router-dom 4.4 또는 react-router-dom 4.4와 함께 react-router 4.3을 사용할 수 없다.(편집: 다음과 같이 작성:왜 그것은 획기적인 변화로 간주되지 않는가?)

동일한 버전이 있는지 확인하십시오.

너는 이렇게 코드를 써야 한다.

import {BrowserRouter, Switch, Router} from 'react-router-dom
 
 class App extends Component {
  render() {
    return (
      <div className = 'app'>
        <nav>
          <ul>
            <li><Link exact activeClassName="current" to='/'>Home</Link></li>
            <li><Link exact activeClassName="current" to='/TicTacToe'>TicTacToe</Link></li>
            <li><Link exact activeClassName="current" to='/NumGame'>Quick Maths</Link></li>
            <li><Link exact activeClassName="current" to='/HighScore'>Highscore</Link></li>
            <li><Link exact activeClassName="current" to='/Profile'>Profile</Link></li>
            <li><Link exact activeClassName="current" to='/Login'>Sign out</Link></li>
          </ul>
        </nav>

     <BrowserRouter>
        <Switch>
          <Route exact path='/' component={Home}></Route>
          <Route path='/TicTacToe' component={TicTacToe}></Route>
          <Route path='/NumGame' component={NumberGame}></Route>
          <Route path='/HighScore' component={HighScore}></Route>
          <Route path='/Profile' component={Profile}></Route>
          <Route path='/Login' component={SignOut1}></Route>
        </Switch>
      <BrowserRouter/>
      </div>
    );
  }
};

Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router>[enter image description here][1]

[Error: Invariant failed: You should not use <Link>,<Switch>,<Route> outside a <Router> ][1]

 1. Open Index.js or Index.jsx
 2. add-> import { BrowserRouter } from "react-router-dom";
 3.Rap <App /> in <BrowserRouter> and </BrowserRouter> 
should  look like :
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

나는 이 문제를 해결하기 위한 해결책을 찾았다.

다음은 예제 코드 입니다.

import React from 'react';
import Home from './HomeComponent/Home';
import { Switch, Route } from 'react-router';
import { BrowserRouter } from "react-router-dom";
class App extends React.Component{
render(){
return(
         <BrowserRouter>
           <Switch>
            <Route path="/" render={props => (
                <Home {...props}/>
            )}/>
          </Switch>
        </BrowserRouter>
    )
  }
}
export default App;

내 NavLink와 Route는 별도의 파일에 있으며, 이 오류를 중지하기 위해 BrowserRouter에서 두 개의 파일을 모두 처리해야 했다.

import React from 'react';
import { NavLink, BrowserRouter } from 'react-router-dom'
const MainNav = () => (
  <BrowserRouter>
      <nav>
      <ul>
        <li>
          <NavLink exact activeClassName='current' to='/'>Home</NavLink>
        </li>
        <li>
          <NavLink exact activeClassName='current' to='/users'>Users</NavLink>
        </li>
      </ul>
    </nav>
  </BrowserRouter>
);


export default MainNav;

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from '../views/HomeView';
import UsersView from '../views/UsersView';
import { BrowserRouter } from 'react-router-dom';

const MainRoutes = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path='/' component={Home}></Route>
      <Route exact path='/users' component={UsersView}></Route>
    </Switch>
  </BrowserRouter>
);

export default MainRoutes;`

참조URL: https://stackoverflow.com/questions/50584641/invariant-violation-you-should-not-use-switch-outside-a-router