ant-design breadcrumbs with ID

user_10638608 0
Viewed 1206

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)

react-router antd reactjs
1 Answers

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>
user_29020630
Related