reactjs - 在 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 Hook 执行此操作的可能方法:

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