使用带有 reactjs 和 react-router-v5 的面包屑返回到以前的页面时出错

Question

我正在使用 reactjs 和 react-router v5 制作面包屑。 当我点击面包屑中的上一页时出现错误。 应用程序挂起。 这是我的面包屑。

显示最近的 url 页面是可行的。 但问题是当我想从面包屑返回到上一页时，我的应用程序挂起，并且出现此错误。

然后我得到了关于 url 的奇怪的事情。 当我完成最后一页时。 当我将链接悬停在面包屑中时，它看起来是一样的。

这很奇怪，因为仪表板的 url 是 '/'。

这是我的面包屑代码。

import React from "react";
import { Breadcrumb } from "react-bootstrap";
import { Link, withRouter } from "react-router-dom";

const Breadcrumbs = (props) => {
    const {
        history,
        location: {pathname}
    } = props;

    const pathnames = pathname.split("/").filter(x => x);

  return (
    <Breadcrumb aria-label="breadcrumb">
        <Link onClick={() => history.push("/")}> Dashboard</Link>

        {
            pathnames.map((name, index) => {
                const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
                const isLast = index === pathnames.length - 1;
                return isLast ? (<>
                    <Breadcrumb.Item key={name}>{name}</Breadcrumb.Item> </>
                ) : (
                    <Link key={name}  onClick={() => history.push(routeTo)}>{name}</Link>
                )
            })
        }
    </Breadcrumb>
  );
};

export default  withRouter(Breadcrumbs);

我希望我的面包屑导航像这样工作。 演示面包屑

我卡住了。 任何帮助将不胜感激。 谢谢你。

Answer 1

react-router-dom Link组件需要一个带有有效字符串或具有pathname属性的Path对象to prop。

代替

<Link onClick={() => history.push("/")}>Dashboard</Link>
...
<Link key={name} onClick={() => history.push(routeTo)}>{name}</Link>

采用

<Link to="/">Dashboard</Link>
...
<Link key={name} to={routeTo}>{name}</Link>