0
130
ViewsPregunta relacionada con el error que ocurre al usar el enrutador en reaccionar
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.
Códigos:
Índice.js
import { StrictMode } from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <App /> </StrictMode>, rootElement );Aplicación.js
import React from "react"; import Home from "./Home"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; export default function App() { return ( <Router> <div> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> <Switch> <Route path="/" exact></Route> </Switch> </Router> ); }Inicio.js
import React from "react"; function Home() { return ( <div> <h2>Hello You are at Home </h2> </div> ); } export default Home;2 answers
Answer question0
Puedo reproducir el error cuando uso react-router-dom v6. RRDv6 no exporta un componente Switch y fue reemplazado efectivamente por un componente Routes requerido que maneja la coincidencia y la representación de los componentes Route .
Si no tenía la intención de instalar la última versión de react-router-dom , revierta su proyecto a la versión v5 anterior.
Desde el directorio de su proyecto ejecute:
Desinstalar cualquier versión actual
npm run uninstall -s react-router-dom react-routerInstalar las últimas versiones v5
npm run install -s react-router-dom@5 react-router@5
Si decide continuar usando RRDv6, debe realizar algunas migraciones.
- Reemplace el componente
Switchcon el componenteRoutes - Mueva el componente
Homepara que se represente en la propiedad delelementdel componenteRoute
Ejemplo:
export default function App() { return ( <Router> <div> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> <Routes> <Route path="/" element={<Home />} /> </Routes> </Router> ); } 
Consulte la Guía de migración para obtener más detalles y otros cambios.
0
Usando react-router-dom v6 para definir rutas como esta:
export default function App() { return ( <Router> <Routes> <Route path='/' element={<Home />} /> <Route path='/about' element={<About />} /> </Routes> </Router> ); }y en Home.js:
function Home() { return ( <> <div> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> <div> <h2>Hello You are at Home </h2> </div> </> ); }Entonces, el problema era separar los enlaces del enrutador.