材质UI - 阵营路由器 - 面包屑与ID

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作为道具面包屑，所以我可以显示与标识的完整的路线？

Answer 1

相反的位置，你可以使用match即match.params.id