0
131
Vistasel enrutador del navegador no se exporta desde el enrutador de reacción
Estoy tratando de usar el dom del enrutador de reacción para hacer diferentes páginas para que pueda ir a diferentes páginas al hacer clic, pero la aplicación no se compila porque el enrutador del navegador no se está importando. Acabo de copiarlo pegado directamente desde el sitio web. alguien me puede decir donde esta el error y como solucionarlo
aplicación js
import React from 'react'; import Header from './components/Header'; import Home from './components/Home'; import './App.css'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router' import Detail from './components/Detail'; function App() { return ( <div className='App'> <Router> <Header /> <Switch> <Route path='detail'> <Detail /> </Route> <Route path='/'> <Home /> </Route> </Switch> </Router> <Home /> </div> ) } export default App;paquete.json {
"name": "disneyplus-clone", "version": "0.1.0", "private": true, "dependencies": { "@reduxjs/toolkit": "^1.6.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.6", "react-router-dom": "^6.1.0", "react-scripts": "4.0.3", "react-slick": "^0.28.1", "slick-carousel": "^1.8.1", "styled-components": "^5.3.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 
1 Respuestas
Responde la pregunta0
Está utilizando la versión 6 de react-router-dom y no ha especificado react-router en su archivo package.json.
Importe los componentes de react-router-dom y conviértalos para usar los componentes RRDv6. El componente Switch fue reemplazado por un componente Routes que debe envolver los componentes Route . Los componentes Route ahora también representan sus componentes enrutados en la propiedad del element como JSX .
import React from 'react'; import Header from './components/Header'; import Home from './components/Home'; import './App.css'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom' import Detail from './components/Detail'; function App() { return ( <div className='App'> <Router> <Header /> <Routes> <Route path='detail' element={<Detail />} /> <Route path='/' element={<Home />} /> </Routes> </Router> <Home /> </div> ) }