选项卡中的URL重定向-React

Question

我目前正在尝试将我的路由器添加到我的应用程序中，但是当我单击选项卡时，我仍然无法重定向到新的URL。

我使用React-Bootstrap来制作这个标签：

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

现在我要做的就是当我点击让我们说“Home”时，它会将我重定向到我的应用程序的另一个URL（让我们说“/ Home”）。我知道<Link to =“/ Home”> Home </ Link>有一种方法，但我似乎无法在我的<Tab>中添加它。

我还尝试添加一个handleSelect（）方法，该方法接收selectedKey并执行操作：

handleSelect(selectedKey) {
 switch(selectedKey) {
    case 1 :
        location.reload();
    break;
    case 2 :
        //redirect url to =>('/Home')
    break;
 }
},

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

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

谢谢

Answer 1

通过你的路线到eventKey然后在handleSelect，通过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>
    );
  }

如果你想把你的eventKeys保持为整数，那么把switch cases放在handleSelect

  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>
    );
  }