Пользовательский интерфейс материала - React Router - сухари с идентификатором

Question

Я пытаюсь реализовать материальные и хлебные крошки, интегрированные с ReactionRouter, но у меня небольшая проблема,

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

, а затем компонент из примера пользовательского интерфейса:

      <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 как реквизит к сухарям, чтобы я мог отобразить полные маршруты с идентификаторами?

Answer 1

Вместо местоположения вы можете использовать match т.е. match.params.id