带有 ID 的 ant-design 面包屑

Question

Let's say I have this routing in my react App ( Router is a BrowserRouter here)

<Router>
  <PageHeader />
    <Switch>
      <PrivateRoute exact path="/" component={HomePage} />
      <PrivateRoute exact path="/profile" component={Profile} />
      <PrivateRoute
          exact
          path="/project/:projectName"
          component={Project}
      />
    </Switch>
</Router>

I want to display breadcrumbs in my pageheader. Ant Design docs explain how to do this with fixed paths here - by fixed I mean ones like / or /profile .

What I want to do is for example display a breadcrumb like Home / FooBar if user goes to /projects/FooBar .

Is there a way to do it? When I use withRouter on my PageHeader , the location has a pathname of /project/FooBar , but for example match has path: "/" , url: "/" and no params (which I expected to contain ID).

So the question is: is there a way to display breadcrumbs like Home /:projectName ? I can build them with a 3rd party App, but I would want them to go into either ant design's PageHeader (as props) or to ant design's BreadCrumb component (as children)

Answer 1

Have you tried using react-router hook useParams ?

If your Route is defined as <Route path="/project/:projectName" /> you should be able to do something like this:

const { projectName } = useParams();

<Breadcrumb>
  <Breadcrumb.Item>{`Home / ${projectName}`}</Breadcrumb.Item>
</Breadcrumb>