使用react-router-dom v6时Link组件报pathname读取错误求助

错误原因 #

你的代码里存在一个没有指定to属性的<Link>组件（就是包裹<TreeView>的那个空<Link>标签）。在react-router-dom v6中，<Link>必须明确设置to属性来指定导航目标，旧版本可能允许无to的<Link>作为容器使用，但v6的<Link>内部逻辑依赖to属性生成的location对象，缺失该属性会导致无法读取pathname，从而抛出这个错误。

解决方案 #

直接删除那个多余的空<Link>组件，把<TreeView>直接放在外层<div>中即可——它不需要承担导航功能，只是作为展示容器。

修正后的完整代码 #

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>
    </div>
  );
};

export default Sidebar;

内容的提问来源于stack exchange，提问作者Ujwal Gaonkar