0
250
ViewsEl contenido desaparece cuando se usa la etiqueta <Route>
Cada vez que agrego una etiqueta < Ruta > al código, ¡todo desaparece de la pantalla!
¡El código está bien, supongo! no se muestran advertencias!!
la salida antes de agregar las etiquetas < Route > 
y cuando agrego una etiqueta < Route >, ¡la salida simplemente ya no está allí!
el código antes de añadir la etiqueta:
import React from "react"; import "./App.css"; import Header from "./Header"; import { BrowserRouter, Route } from "react-router-dom"; function App() { return ( <div className="App"> <BrowserRouter> <Header /> </BrowserRouter> </div> ); } export default App;y el código posterior es realmente el mismo pero agregando las etiquetas:
import React from "react"; import "./App.css"; import Header from "./Header"; import { BrowserRouter, Route } from "react-router-dom"; function App() { return ( <div className="App"> <BrowserRouter> <Header /> <Route></Route> </BrowserRouter> </div> ); } export default App;¡Y cuando agregué las etiquetas, el contenido desapareció!
2 answers
Answer question0
Verifique su package.json si la versión de react-router-dom es 6 y luego bájela a 5, de ahí proviene el error.
Lo sé porque ahora npm install install la versión 6 como su versión predeterminada, pero los tutoriales y el conocimiento sobre el enrutador de reacción en línea todavía son para la versión 5.
así que en su paquete.json cambie la versión de 6 a 5.3.0 y ejecute npm install en su terminal
0
Dado que la etiqueta de ruta está vacía, no está devolviendo nada. Debe pasar la ruta y el componente que se debe representar para cada ruta. En este caso, teniendo en cuenta que tiene una ruta única y desea mostrar ¡Hola mundo! cuando se inicia la aplicación, debe agregar
<BrowserRouter> <Route exact path="/" component={App} /> </BrowserRouter>Esto renderizará su componente de aplicación cuando inicie la aplicación. Puede agregar otros componentes para otras rutas de manera similar.