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

debugcn 发表于 Dev

托德·斯凯尔顿

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

不幸的是，即使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 / / /主页上的组件。

瑞安·科格斯威尔（Ryan Cogswell）

下面是使用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 />
    </>
  );
}