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>
 );
}

Intente colocar su <Route path='/' /> en último lugar de la lista.