Skip to main content
3 de 3
se añadieron 8 caracteres en el cuerpo
josanangel
  • 2.4k
  • 1
  • 24
  • 66

React Router | Como indicar la ruta por defecto y otras mejoras relacionadas

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

josanangel
  • 2.4k
  • 1
  • 24
  • 66