he hecho una pequeña aplicacion de listas de todo (sin crud) para ir asentando conceptos que he ido aprendiendo en estos dias, pero hay una parte que he hecho de manera rudimentaria me parece, y queria saber cual seria una forma mas profesional usando las apis que provee react-router por ejemplo.
El problema que veo es sobre gestionar una ruta por defecto :
Y es que la ruta raiz quiero que sea /list
pero sin cambiar la ruta base (/
) , es decir, que de alguna manera decirle que cargue siempre, de primeras /list
.
La solución que he encontrado es indicar en el componente menu lo siguiente:
import React, { useEffect, useState } from "react";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import PlaylistRemoveIcon from "@mui/icons-material/PlaylistRemove";
import ChecklistRtlIcon from "@mui/icons-material/ChecklistRtl";
import TocIcon from "@mui/icons-material/Toc";
import { Link, useLocation, useNavigate } from "react-router-dom";
const Menu = () => {
const location = useLocation();
const navigate = useNavigate();
const defaultRoute = '/list';
const [menu, setMenu] = useState(0);
const detectActiveMenu = () => {
switch (location.pathname) {
case "/list":
setMenu(0);
break;
case "/list/uncompleted":
setMenu(1);
break;
case "/list/completed":
setMenu(2);
break;
default:
setMenu(0);
break;
}
};
const checkRoute = () =>{
if (location.pathname === '/') {
console.log('redirecting to default route...');
navigate(defaultRoute);
}
}
useEffect(() => {
checkRoute();
detectActiveMenu();
}, []);
return (
<BottomNavigation
showLabels
value={menu}
onChange={(event, newValue) => {
setMenu(newValue);
}}
>
<BottomNavigationAction
component={Link}
to="/list"
label="ToDo List"
icon={<TocIcon />}
/>
<BottomNavigationAction
label="Uncompleted Tasks"
icon={<PlaylistRemoveIcon />}
component={Link}
to="/list/uncompleted"
/>
<BottomNavigationAction
label="Completed Tasks"
icon={<ChecklistRtlIcon />}
component={Link}
to="/list/completed"
/>
</BottomNavigation>
);
};
export default Menu;
Repositorio: https://github.com/joseangelcrn/todo_list_react
Por otro lado, me gustaria preguntaros si la alternativa que he usado para marcar el menu seleccionado es buena o tambien algo rudimentaria.
He ido mirando la documentacion a lo largo de todo el aprendizaje, pero veo en estos puntos que indico una pequeña carencia en ella, o al menos ha sido mi impresion
Cualquier fork del repositorio es bienvenido! :)