Violation invariante : Vous ne devriez pas utiliser <Switch> en dehors d'un <Router>

Question

J'ai un problème que je ne sais pas comment résoudre, j'obtiens cette erreur lors de l'exécution de npm test

Violación de invariante: No debe usar fuera de un

Quel peut être le problème et comment puis-je le résoudre ? Le test que j'exécute est le fichier app.test.js standard fourni avec react

class App extends Component {
  render() {
    return (

            Accueil
            TicTacToe
            Maths Rapides
            Meilleurs Scores
            Profil
            Se déconnecter

    );
  }
};

Answer 1

J'avais le même problème. Il a été résolu lorsque j'ai "importé BrowserRouter depuis react-router-dom" et écrit le code

  //vos routes ici

Answer 2

Vous ne pouvez pas utiliser react-router 4.3 avec react-router-dom 4.4 ou vice versa. (Edit: en l'écrivant de cette façon : Pourquoi cela n'est-il pas considéré comme un changement important ?)

Assurez-vous d'avoir les mêmes versions

Answer 3

Vous devriez écrire votre code comme ceci

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

 class App extends Component {
  render() {
    return (

            Accueil
            TicTacToe
            Quick Maths
            Meilleurs Scores
            Profil
            Se déconnecter

    );
  }
};

Answer 4

Erreur : Invariant échoué: Vous ne devriez pas utiliser , ,  en dehors d'un  [entrer une description de l'image ici][1]

[Erreur : Invariant échoué: Vous ne devriez pas utiliser , ,  en dehors d'un  ][1]

 1. Ouvrez Index.js ou Index.jsx
 2. ajoutez-> import { BrowserRouter } from "react-router-dom";
 3. Enveloppez  dans  et  
devrait ressembler à :
ReactDOM.render(

  ,
  document.getElementById("root")
);

Answer 5

J'ai trouvé une solution pour résoudre ce problème

voici le code exemple

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(

             (

            )}/>

    )
  }
}
export default App;