En el archivo package.json se agregaron las dependencias react-router-dom. Componente de la aplicación envuelto por BrowswerRouter, pero cuando envuelvo la ruta por interruptor dice que el siguiente error "Switch" no se exporta desde "react-router-dom". Eliminé el paquete.json.lock, los módulos de nodo, instalé npm nuevamente y npm install @babel/core --save. Sigue sin funcionar. Desperdicié con éxito 6 horas para esto. ¿Puedes ayudarme a arreglar esto? ¿Por qué no está importando?
Índice.js
import {BrowserRouter} from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') );Aplicación.js:
import logo from './logo.svg'; import './App.css'; import React from 'react'; import {Switch,Route,Link} from 'react-router-dom'; import Home from './Home'; class App extends React.Component { componentDidMount(){ alert('mounting'); } componentDidUpdate(){ alert('updated'); } render(){ return ( <div className="App"> <div> <Link to="/">Home</Link> </div> <hr /> <Switch> <Route exact path="/"> <Home/> </Route> </Switch> </div> ); } } export default App; import React from 'react'; const Home = () => { return <h1>Home</h1>; }; export default Home;paquete.json
"dependencies": { "@babel/core": "^7.16.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router": "^6.0.0", "react-router-dom": "^6.0.0", "react-scripts": "4.0.3", "web-vitals": "^1.0.1" },Los usuarios no podrán encontrar Switch en react-router-dom . Necesitan instalar versiones hasta 5 o inferiores a 5. Pruebe la siguiente, que funcionará. Si el usuario usa rutas en lugar de Switch, es posible que no funcione.
npm install react-router-dom@5Routes en lugar de Switch en react-router v6 Está utilizando la versión 6 react-router-dom , que reemplazó Switch con el componente Routes
import { BrowserRouter, Routes, // instead of "Switch" Route, } from "react-router-dom"; // ... <BrowserRouter> <Routes> <Route exact path="/" element={<Home />}> <Home/> </Route> </Routes> </BrowserRouter> Tenga en cuenta que ahora también pasa su componente como element prop en lugar de usar elementos secundarios.
si desea usar Switch , instale react-router-dom versión 5. Switch se reemplaza en react-router-dom versión 6.
npm install react-router-dom@5