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

L'erreur est correcte. Vous devez envelopper le Switch avec BrowserRouter ou d'autres alternatives comme HashRouter, MemoryRouter. Cela est nécessaire car BrowserRouter et les alternatives sont l'interface de bas niveau commune à tous les composants de routeur et ils utilisent l'API history HTML 5, et vous en avez besoin pour naviguer entre vos routes.

Essayez de faire cela plutôt

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

Et puis enveloppez tout comme ceci

  //vos routes ici

Answer 2

La manière appropriée de gérer cela, selon les développeurs de React Router, est d'encapsuler votre test unitaire dans un Router. Il est recommandé d'utiliser MemoryRouter afin de pouvoir réinitialiser le routeur entre les tests.

Vous pouvez toujours faire quelque chose comme ce qui suit:

Ensuite dans App:

Vos tests unitaires pour App ressembleraient normalement à ceci:

const content = render(); // Échoue au test unitaire

Mettez à jour le test unitaire pour:

const content = render(); // Réussit au test unitaire

Answer 3

Assurez-vous d'avoir des imports corrects dans tous les composants imbriqués. Vous pourriez obtenir cette erreur si l'un d'eux importe Switch de react-router au lieu de react-router-dom. Gardez tout cohérent avec 'react-router-dom' (qui réexporte de toute façon les composants react-router). Vérifié avec :

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

Answer 4

Toujours mettre BrowserRouter dans les composants de navigation, suivez l'exemple :

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

var Componente1 = () => (Composant 1)
var Componente2 = () => (Composant 2)
var Componente3 = () => (Composant 3)

class Rotas extends Component {
    render() {

        return (

        )
    }
}

class Naviguation extends Component {
    render() {
        return (

                        Comp1

                        Comp2

                        Comp3

        )
    }
}

class App extends Component {
    render() {
        return (

        )
    }
}

render(, document.getElementById("root"))

Remarque : BrowserRouter accepte seulement un élément enfant.

Answer 5

La façon dont j'ai procédé était de mettre à jour les dépendances avec yarn add react-router-dom ou npm install react-router-dom et de supprimer le dossier node_modules puis d'exécuter à nouveau yarn ou npm install.