0
288
VistasReact Router renderizando página en blanco
Tengo este problema mucho al usar el enrutador de reacción, solo deja en blanco toda mi aplicación.
el ] al final era un error tipográfico y no mostraría una página en blanco, solo daría un error normal
Esta es mi aplicación.js:
import './App.css'; import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom'; import Home from './components/home'; import About from './components/about'; import Projects from './components/projects'; function App() { return ( <Router> <header> <div className='logo'>MyPortfolio</div> <h2>Eshwar Tangirala</h2> <ul> <Link><li>Home</li></Link> <Link to="/about"><li>About</li></Link> <Link to="/projects"><li>Projects</li></Link> </ul> </header> <Routes> <Route path="/" element={<Home/>}/> <Route path="/about" element={<About/>}/> <Route path="projects" element={<Projects/>}/> </Routes> </Router> ); } export default App;Mis otros componentes, como hogar, acerca de y proyectos, solo tienen un H1 con su nombre.
3 Respuestas
Responde la pregunta0
Ha mezclado sus importaciones:
import { BrowserRouter as Route, Router, Routes, Link } from 'react-router-dom';Tienes:
- Importó un
BrowserRoutercomo el componente deRoute - Se importó el
Routerde bajo nivel al que le faltan algunos accesorios necesarios para pasarle
Arreglar las importaciones:
- Importar
BrowserRoutercomoRouter - Importar el componente
Route
Importaciones correctas
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; Y si no es un error tipográfico de copiar/pegar, elimine el final ] en la exportación de la App :
export default App;] para export default App; .
0
Si el código que se ejecuta en su editor es el mismo que el fragmento anterior, tiene un error tipográfico en su exportación (el ] adicional)
export default App;0
Verifique su exportación de aplicación predeterminada, elimine esto ] tiene una matriz ] etiqueta de cierre. Su exportación predeterminada debería ser así:
export default App;No
export default App;]