Material UI - React Router - 带有 ID 的 BreadCrumbs

Question

我正在尝试实现与 reactRouter 集成的材料 ui 面包屑，但我遇到了一个小问题，

const breadcrumbNameMap = {
  '/users': 'Users',
  '/users/:id': ':id',
  '/users/:id/detail': 'Details',
}

然后是材质ui示例中的组件：

      <NoSsr>
        <MemoryRouter initialEntries={['/stock']} initialIndex={0}>
          <div >
            <Route>
              {({ location }) => {
                const pathnames = this.props.location.pathname.split('/').filter(x => x)

                return (
                  <Breadcrumbs arial-label="Breadcrumb">
                    {/* <Link component={RouterLink} color="inherit" to="/stocks">
                      Home
                    </Link> */}
                    {pathnames.map((value, index) => {
                      const last = index === pathnames.length - 1;
                      const to = `/${pathnames.slice(0, index + 1).join('/')}`;
                      return last ? (
                        <Typography color="textPrimary" key={to}>
                          {breadcrumbNameMap[to]}
                        </Typography>
                      ) : (
                        <Link component={RouterLink} color="inherit" to={to} key={to}>
                          {breadcrumbNameMap[to]}
                        </Link>
                      )
                    })}
                  </Breadcrumbs>
                )
              }}
            </Route>
          </div>
        </MemoryRouter>
      </NoSsr>

由于未指定 ':id'，脚本无法找到正确的字符串以放入面包屑导航。 （如果我指定它按预期工作的 ID）

有没有办法将 :id 作为道具传递给面包屑，这样我就可以显示带有 ID 的完整路线？

Answer 1

您可以使用match 代替位置，即match.params.id