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!** :)