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

Question

I'm make a breadcrumb using reactjs and react-router v5. I'm getting error when i'm click to previous page in breadcumbs. the application becomes hang. here's my breadcrumb.

showing the recent url pages is work. But the problem is when i want to back to previous page from breadcrumbs, my apps become hang, and i'm getting this error.

And then i'm getting the weird things about url. when i'm done in the last page. when i'm hover the link in breadcrumbs, it looks same.

it's weird, because the url of dashboard is '/'.

Here's my breadcrumbs code.

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);

I want my breadcrumbs work like this. Demo Breadcrumbs

i'm stuck. any help will be appreciated. Thank you.

Answer 1

The react-router-dom Link component requires a to prop with a valid string or Path object with pathname property.

Instead of

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

use

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