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

来代替位置信息

材质UI-React Router-ID为BreadCrumbs

1 个答案: