在 Material-UI 面包屑导航中使用 React Router DOM 路由

Question

我正在尝试使用 React Router DOM Route 组件动态生成 Material-UI Breadcrumb 控件。

不幸的是，即使 Route 组件不匹配并且不呈现任何内容，它也会作为子项添加到面包屑中，因此我的 UI 中出现空分隔符。

这是我当前的组件。

import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import MuiLink from '@material-ui/core/Link';
import React, { FC } from 'react';
import { Link, Route } from 'react-router-dom';

const MainBreadcrumbs: FC = () => (
    <Breadcrumbs>
        <Route path="/" render={() => (<MuiLink component={Link} to="/">Home</MuiLink>)} />
        <Route path="/jobs" render={() => (<MuiLink component={Link} to="/jobs">Jobs</MuiLink>)} />
        <Route path="/jobs/:jobId" render={route => (<MuiLink component={Link} to={`/jobs/${route.match.params.jobId}`}>Job</MuiLink>)} />
        <Route path="/jobs/:jobId/steps/:stepIndex" render={route => (<MuiLink component={Link} to={`/jobs/${route.match.params.jobId}/${route.match.params.stepIndex}`}>Step</MuiLink>)} />
    </Breadcrumbs>
)

export default MainBreadcrumbs;

这导致在主页上看起来像Home / / /的组件。

Answer 1

下面是使用useRouteMatch挂钩执行此操作的可能方法：

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link, useRouteMatch } from "react-router-dom";
import MuiLink from "@material-ui/core/Link";

export default function SimpleBreadcrumbs() {
  const homeMatches = useRouteMatch("/");
  const jobsMatches = useRouteMatch("/jobs");
  const jobMatches = useRouteMatch("/jobs/:jobid");
  const stepMatches = useRouteMatch("/jobs/:jobid/:stepIndex");
  return (
    <>
      <Breadcrumbs>
        {homeMatches && (
          <MuiLink component={Link} to="/">
            Home
          </MuiLink>
        )}
        {jobsMatches && (
          <MuiLink component={Link} to="/jobs">
            Jobs
          </MuiLink>
        )}
        {jobMatches && (
          <MuiLink component={Link} to={`/jobs/${jobMatches.params.jobid}`}>
            Job {jobMatches.params.jobid}
          </MuiLink>
        )}
        {stepMatches && (
          <MuiLink
            component={Link}
            to={`/jobs/${jobMatches.params.jobid}/${
              stepMatches.params.stepIndex
            }`}
          >
            Step {stepMatches.params.stepIndex}
          </MuiLink>
        )}
      </Breadcrumbs>
      <Link to="/">Go to Home</Link>
      <br />
      <Link to="/jobs">Go to Jobs</Link>
      <br />
      <Link to="/jobs/123/abc">Go to Job 123, step abc</Link>
      <br />
    </>
  );
}

Answer 2

我为你做了一个例子： https ://codesandbox.io/s/material-demo-ys532

编辑：所以我选择使用条件渲染，它在代码上看起来可能很难看，但你可以通过制作一个组件 BreadCrumbRoute 并将所有这些作为道具来抽象它，它看起来和 Route 一样清晰:) 我开始构建它检查代码沙箱，你可以自己完成：V---