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>