reactjs - 选项卡内的 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”时，它会将我重定向到应用程序的另一个网址(比如“/Home”)。 我知道有一种方法可以使用Home，但我似乎无法将其添加到我的中。

我还尝试添加一个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 case 放入 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>
    );
  }