- Mise à jour: Cela a commencé à fonctionner lorsque je viens d'arrêter le serveur de développement, de quitter VSCode et de le redémarrer. Je ne sais pas ce qui l'a causé.
Occupé à apprendre React et a rencontré cette erreur. J'ai essayé plusieurs autres articles SO mais je n'arrive pas à trouver une réponse à mon problème.
Je suis les instructions pour n'utiliser que react-router-dom et importer BrowserRouter et Route depuis react-router-dom. Mais j'obtiens une erreur:
"name": "poketimes",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Vous ne savez pas ce que je fais de mal ici?
Voici mon App.js
import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './components/Home'
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Route path='/' component={Home} />
</div>
</BrowserRouter>
);
}
}
export default App;
Voici mon package.json:
./src/App.js Attempted import error: 'Route' is not exported from 'react-router-dom'.
D'après ce que j'ai lu, d'autres articles utilisent toujours le react-router séparément, mais si je comprends correctement la documentation, je ne suis pas censé le faire dans cette version? De plus, je suis un tutoriel qui fait exactement cela et cela semble fonctionner.
Tout conseil serait grandement apprécié, merci!
9 Réponses :
import React, { Component } from 'react';
import Navbar from './components/Navbar'
import { BrowserRouter, Route ,Switch} from 'react-router-dom'
import Home from './components/Home'
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route exact path='/' component={Home} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
try this way
Veuillez fournir une description détaillée, pourquoi le demandeur doit importer Switch, veuillez également mettre un commentaire en premier au lieu de répondre
référez-vous à ce lien pour avoir une idée, pourquoi envelopper la route avec Switch reacttraining.com/react-router/web/api/Switch
Il semble que la route soit dépréciée dans les versions à venir, utilisez donc l'importation suivante. A travaillé pour moi.
import {Route} de 'react-router-dom / Route';
Si quoi que ce soit, vous auriez importé Route , pas {Route} . L'importation de {route} consiste essentiellement à importer react-router-dom/Route/Route
J'avais le même problème. Vous pouvez avoir un conflit avec NPM et YARN. J'ai supprimé mon yarn.lock et l'ai exécuté à nouveau avec uniquement package.lock; et cela a fonctionné.
Vous ne devez utiliser que Yarn ou NPM.
Il s'est fixé facilement. Vous pouvez voir ma réponse.
Fermez le serveur et redémarrez-le. Ça fonctionne bien.
npm start ou yarn start
J'étais coincé là-dessus aussi ... Pour moi, cela fonctionnait lorsque la version de "react-router" et "react-router-dom" correspondait.
"react-router": "^5.2.0", "react-router-dom": "^5.2.0",
Peut-être que cela se produit parce que vous ne l'avez pas installé, installez-le. Vous devez exécuter cette commande:
npm i react-router
Veuillez vérifier à nouveau l'orthographe de BrowserRouter ou bien si l'orthographe est correcte, redémarrez le npm en utilisant CTRL + C et
npm start
Vous devez ajouter cette ligne à vos composants.
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
Mon problème a été résolu par cette méthode.
problème résolu en moi
npm désinstaller react-router npm désinstaller react-router-dom
puis
npm installer react-router react-router-dom
utiliser la version 5.0.0
veuillez utiliser ceci; importer {BrowserRouter, Route, Link} depuis "react-router-dom";
Il peut y avoir un problème de dépendance avec react -router 5. reacttraining.com/blog/react-router-v5 Pour l'instant rétrogradez votre react -router à la version 4 et vérifiez.
Le code semble fonctionner avec react-router-dom v5. codesandbox.io/s/n5r3vz9980 . Pouvez-vous publier un exemple reproductible
Regardez ce problème, probablement une incompatibilité entre react-router et react -router-dom github.com/ReactTraining/react-router/issues/6639
@TyroHunter l'autre n'a pas de react-router dans les dépendances
Salut tout le monde. Il a juste commencé à fonctionner lorsque j'ai arrêté le serveur de développement, fermé VSCode, et l'ai rouvert et exécuté à nouveau. N'a rien changé au code. J'utilise yarn start au lieu de npm start, si cela signifie quelque chose? Merci.