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

【问题标题】：Using React Router DOM Route in Material-UI Breadcrumbs在 Material-UI 面包屑中使用 React Router DOM 路由
【发布时间】：2020-03-23 12:11:32
【问题描述】：

我正在尝试使用 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 / / / 的组件。

【问题讨论】：

标签： reactjs material-ui react-router-dom

【解决方案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 />
    </>
  );
}

【讨论】：

这是完美的。谢谢。
简单易行的方法。谢谢:)

【解决方案2】：

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

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

【讨论】：

当我添加更多codesandbox.io/s/material-demo-ecnf2时不起作用
我编辑了完整的答案:) 随意投票，解决方案答案：v ----
谢谢，但这仍然有问题。它只呈现一个链接，并且当我在要匹配的路径中有动态 id 时，匹配的路径名将不起作用。（例如/jobs/:jobId）
再次检查链接 :) 我会和 startWith 调情（你可以添加一个 prop: 运算符，这样它就知道什么时候 = 什么时候开始了），但方法有很多，但需要好好重新思考如果您有超过 1 个动态参数
是的，我有多个动态参数。我可能不得不创建自己的面包屑组件，而不是尝试使用 MUI。