0
125
VistasReact muestra otra página y luego la página de inicio, mientras navega a la página de inicio
Soy nuevo en React y estoy usando el curso intensivo de Traversy y el video adicional sobre el enrutador de reacción 6+.
Mis rutas son como
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
return (
<div className="container">
<Router>
<Header
title='sikyona'
onAdd={()=> setShowAddtask(!showAddTask)}
showAdd={showAddTask}
/>
<Routes>
<Route
path='/'
element={
<>
{showAddTask && <AddTask onAdd={addTask} />}
{tasks.length > 0
? <Tasks tasks={tasks} onDelete={deleteTask} />
:<p>add tasks</p>
}
</>
}
/>
<Route path='/about' element={<About/>} />
</Routes>
<Footer />
</Router>
</div>
);
El problema es que cuando navego a la página de inicio http://localhost:3000/ primero veo la página Acerca de por un segundo y luego la página de inicio (Ruta ruta='/'...)
Tengo "react-router-dom": "^6.4.1",
¿Qué está pasando y cómo puedo solucionarlo?
2 Respuestas
Responde la pregunta0
El problema no es que la página "Acerca de" o el componente About de se represente cuando la aplicación se está cargando o navegando a "/" por primera vez. Es que la aplicación en realidad está en "/" y no hay tasks para mostrar todavía y la interfaz de usuario está representando el contenedor, el Header , la Route para la path="/" con el texto "agregar tareas" y el pie de Footer que representa un enlace a "/about" .
Compare esta interfaz de usuario renderizada con la ruta "/about" real y el componente About de.
Tal vez la UI/UX esté bien para usted con respecto a este comportamiento y la comprensión de qué se representa exactamente, cuándo y por qué razón. Si, por otro lado , no desea ver nada de la interfaz de usuario hasta que se hayan cargado los datos, puede modificar el código para que no muestre nada o algún indicador de carga mientras se recuperan las tareas.
Ejemplo:
function App() {
const [showAddTask, setShowAddtask] = useState(false);
const [tasks, setTasks] = useState(); // <-- initially undefined
useEffect(() => {
const getTasks = async () => {
try {
const tasks = await fetchTasks();
setTasks(tasks); // <-- defined and populated
} catch(error) {
// log errors, display message, etc... or ignore
setTasks([]); // <-- defined and empty
}
};
getTasks();
}, []);
...
if (!tasks) {
return null; // <-- return null or loading indicator/spinner/etc
}
return (
<div className="container">
<Router>
<Header
title="hello"
onAdd={() => setShowAddtask(show => !show)}
showAdd={showAddTask}
/>
<Routes>
<Route
path="/"
element={
<>
{showAddTask && <AddTask onAdd={addTask} />}
{tasks.length ? (
<Tasks tasks={tasks} onDelete={deleteTask} />
) : (
<p>add tasks</p>
)}
</>
}
/>
<Route path="/about" element={<About />} />
<Route path="/task-details/:id" element={<TaskDetails />} />
</Routes>
<Footer />
</Router>
</div>
);
}
0
Intente colocar su <Route path='/' /> en último lugar de la lista.