Reactjs 选项卡内的url重定向-反应

我目前正试图将我的路由器添加到我的应用程序中，但当我单击选项卡时，我无法重定向到新的url

我使用React引导创建此选项卡：

<div className="divide-nav">
  <div className="container">
                  <Tabs defaultActiveKey={1} id="uncontrolled-tab-example" onSelect={this.handleSelect}>
                        <Tab eventKey={1}  title="Blabla"></Tab>
                        <Tab eventKey={2}  title="Home" ></Tab>
                        <Tab eventKey={3}  title="Blabla" ></Tab>
                        <Tab eventKey={4}  title="Blabla" ></Tab>
                        <Tab eventKey={5}  title="Blabla" ></Tab>
                        <Tab eventKey={6}  title="Blabla" ></Tab>
                        <Tab eventKey={7}  title="Blabla" ></Tab>
                        <Tab eventKey={8}  title="Blabla" ></Tab>
                        <Tab eventKey={9}  title="Blabla" ></Tab>
                        <Tab eventKey={10} title="Blabla" ></Tab>                            
                    </Tabs>


  </div>
</div>

我收到selectedKey并可以重新加载，但我不知道如何在方法中转到另一个URL

*我的应用程序是本地的，所以一切都是客户端的

---

谢谢

将您的路线传递到

事件键

，然后在

手柄中选择

，通过

历史记录更改路线。按

方法

 handleSelect(route) {
    // Get your route name from params and pass it to history.push()
    this.props.history.push(route)
  }

  render() {
    return (
      <div className="divide-nav">
        <div className="container">
          <Tabs defaultActiveKey={1} id="uncontrolled-tab-example"  
             onSelect={this.handleSelect.bind(this)}>

            // Here eventKey will hold the route name
            <Tab eventKey={'/link1'} title="Link 1"></Tab>
            <Tab eventKey={'/link2'} title="Link 2"></Tab>
            <Tab eventKey={'link3'} title="Link 3" ></Tab>
          </Tabs>
        </div>
      </div>
    );
  }

---

这就是你要找的吗？react router redux:4.0.8检查此项，您需要更改路由：，同时检查文档：哦，从未想过使用历史记录。好的，我会尝试一下，然后回复。谢谢History.push重新渲染我的整个组件

 handleSelect(route) {
    // Get your route name from params and pass it to history.push()
    this.props.history.push(route)
  }

  render() {
    return (
      <div className="divide-nav">
        <div className="container">
          <Tabs defaultActiveKey={1} id="uncontrolled-tab-example"  
             onSelect={this.handleSelect.bind(this)}>

            // Here eventKey will hold the route name
            <Tab eventKey={'/link1'} title="Link 1"></Tab>
            <Tab eventKey={'/link2'} title="Link 2"></Tab>
            <Tab eventKey={'link3'} title="Link 3" ></Tab>
          </Tabs>
        </div>
      </div>
    );
  }

  handleSelect(eventKey) {
    let route;
    // Switch cases based on eventKeys
    switch (eventKey) {
      case 1:
        route = 'link1';
        break;
      case 2:
        route = 'link2';
        break;
      case 3:
        route = 'link3';
        break;
      default:
        route = '/';
    }
    this.props.history.push(route)
  }

  render() {
    return (
      <div className="divide-nav">
        <div className="container">
          <Tabs defaultActiveKey={1} id="uncontrolled-tab-example" 
            onSelect={this.handleSelect.bind(this)}>
            <Tab eventKey={1} title="Link 1"></Tab>
            <Tab eventKey={2} title="Link 2"></Tab>
            <Tab eventKey={3} title="Link 3" ></Tab>
          </Tabs>
        </div>
      </div>
    );
  }