Después de instalar la última versión v6, aparece este error:
El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
El código funciona bien para versiones inferiores pero falla para la versión 6.
Código: index.js
import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; ReactDOM.render( <Router> <App /> </Router>, document.getElementById('root') );Aplicación.js
import React from 'react'; import './style.css'; import { Switch, Route } from 'react-router-dom'; import Home from './Home'; let App = () => { return ( <> <Switch> <Route path="/" component={Home} /> </Switch> </> ); }; export default App;Inicio.js
import React from 'react'; let Home = () => { return <h1>Home</h1>; }; export default Home;En V6, React Router agregó algunos cambios importantes y uno de ellos es que reemplazaron Switch con Routes . Además, en lugar de component={Home} debería ser element={<Home/>}
En v6, Switch ya no es compatible, use Routes en su lugar. Utilice Elemento como atributo en lugar de componente.
<Routes> <Route path="/" exact element={<Home />} /> </Routes>En react-router-dom después de que Version-6 ya no esté disponible Switch , en lugar de Switch deberíamos usar Routes
Error: react-router-dom: Versión 6 anterior
import React, { Component } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import Home from './Home'; import Login from './Login'; import './style.css'; class App extends Component { constructor() { super(); this.state = { name: 'React', users: [], }; } render() { return ( <div> <h1>Hello User!</h1> <Router> <Switch> <Route exact path="/home" component={<Home />}/> <Route exact path="/login" component={<Login />}/> </Switch> </Router> </div> ); } } export default App; Solución: reaccionar-router-dom: Versión 6 después de que deberíamos usar Rutas, component en lugar de propiedad de element en Ruta para asignar dom.
import React, { Component } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './Home'; import Login from './Login'; import './style.css'; class App extends Component { constructor() { super(); this.state = { name: 'React', users: [], }; } render() { return ( <div> <h1>Hello User!</h1> <Router> <Routes> <Route exact path="/" element={<Home />} /> <Route exact path="/login" element={<Login />} /> </Routes> </Router> </div> ); } } export default App;