Material UI - React Router - 带有 ID 的面包屑导航

Question

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

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

然后是 material 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

Material UI - React Router - 带有 ID 的面包屑导航

Material UI - React Router - BreadCrumbs with ID

javascript

breadcrumbs

reactjs

react-router

material-ui