0
177
VistasTypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'pathname') y el error anterior ocurrió en el componente <Link>:
Estoy usando react-router-dom v6 pero estoy siguiendo un tutorial antiguo. Recibo el error mencionado anteriormente y lo intenté de muchas maneras, pero sigo obteniendo el mismo error.
Este es el archivo que genera el error:
import React from "react"; import "./sidebar.css"; import logo from "../../images/logo.png"; import { Link } from "react-router-dom"; import { TreeView, TreeItem } from "@material-ui/lab"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import PostAddIcon from "@material-ui/icons/PostAdd"; import AddIcon from "@material-ui/icons/Add"; import ImportExportIcon from "@material-ui/icons/ImportExport"; const Sidebar = () => { return ( <div className="sidebar"> <Link to="/"> <img src={logo} alt="Ecommerce" /> </Link> <Link to="/admin/dashboard"> <p> Dashboard </p> </Link> <Link> <TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ImportExportIcon />} > <TreeItem nodeId="1" label="Products"> <Link to="/admin/products"> <TreeItem nodeId="2" label="All" icon={<PostAddIcon />} /> </Link> <Link to="/admin/product"> <TreeItem nodeId="3" label="Create" icon={<AddIcon />} /> </Link> </TreeItem> </TreeView> </Link> </div> ); }; export default Sidebar;
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Tiene un componente de Link sin un accesorio to envuelva el componente TreeView . to es un apoyo requerido.
interface LinkProps extends Omit< React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" > { replace?: boolean; state?: any; to: To; // <-- non-optional reloadDocument?: boolean; }
No creo que un enlace tenga sentido aquí, así que sugiero simplemente eliminarlo.
Ejemplo:
const Sidebar = () => { return ( <div className="sidebar"> <Link to="/"> <img src={logo} alt="Ecommerce" /> </Link> <Link to="/admin/dashboard"> <p>Dashboard</p> </Link> <TreeView defaultCollapseIcon={<ExpandMoreIcon />} defaultExpandIcon={<ImportExportIcon />} > <TreeItem nodeId="1" label="Products"> <Link to="/admin/products"> <TreeItem nodeId="2" label="All" icon={<PostAddIcon />} /> </Link> <Link to="/admin/product"> <TreeItem nodeId="3" label="Create" icon={<AddIcon />} /> </Link> </TreeItem> </TreeView> </div> ); }; 
Si realmente quería que un Link envolviera todo ese submenú, entonces necesita to propiedad requerida.
·
Santiago Trujillo
Denunciar
Responde la pregunta