0

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;

Si os fijais en la funcion checkRoute() compruebo la ruta actual.

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 Pull Request del repositorio es bienvenido! :)

1 respuesta 1

0

Tu enfoque para redirigir automáticamente la ruta raíz a /list y para marcar el menú seleccionado basado en la ubicación actual es sólido y efectivo. Sin embargo, hay algunas mejoras que podrías considerar para hacerlo más profesional y robusto:

opcion 1: Redireccionamiento usando Route

    <Route exact path="/">
      <Redirect to="/list" />
    </Route>

opcion 2: Uso de NavLink para marcar el menú activo

    import { NavLink } from "react-router-dom";

   <BottomNavigationAction
     label="ToDo List"
     icon={<TocIcon />}
     component={NavLink}
     to="/list"
     activeClassName="selected"
   />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.