React Router 和 Reactstrap - 使用 Breadcrumb 渲染路径

Question

我正在使用 reactstrap Breadcrumb 组件如下：

<Breadcrumb tag="nav" className="relay-breadcrumb">
  <BreadcrumbItem tag="a" href="#">Dashboard</BreadcrumbItem>
  <BreadcrumbItem tag="a" href="#">Channels</BreadcrumbItem>
  <BreadcrumbItem tag="a" href="#">{match.params.channelName}</BreadcrumbItem>
  <BreadcrumbItem active >{match.params.videoName}</BreadcrumbItem>
</Breadcrumb>

当我给出这样的值时：

href={`/dashboard/channels/${{match.params.channelName}`}}

...重定向似乎有效，但整个页面重新加载。请提出更好的选择。

Answer 1

使用 RRv4 的 history.push() API:

<Breadcrumb tag="nav" className="relay-breadcrumb">
  <BreadcrumbItem
    tag="a"
    onClick={() => this.props.history.push(`/dashboard/channels/${match.params.channelName}`)}
  >
    Dashboard
  </BreadcrumbItem>
  {
    /* ....*/
  }
</Breadcrumb>

React Router 和 Reactstrap - 使用 Breadcrumb 渲染路径

React Router and Reactstrap - render path using Breadcrumb

reactjs

react-router-v4

reactstrap