如何将react-router链接与react-bootstrap选项卡结合在一起？

Question

我正在尝试在Link选项卡中包含React-Bootstrap，但是我无法实现我的目标，有人可以帮助我如何解决此问题。实际上，我正在使用react-bootstrap选项卡。在这里，我想包含react-router-dom来导航至选项卡。

[您可以看到不同的内容，例如Video Insight , Device Insight，在此内容下面您会找到see more，因此在这里，例如，如果用户单击查看更多，则我想打开user Insights选项卡（在选项卡中提到）。请帮助我，我真的被困住了。

代码

<Tabs defaultActiveKey="home" id="uncontrolled-tab-example">
              <Tab
                eventKey="home"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                    Channel Summary
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>

  <Tab
                eventKey="device"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                    Device Insight
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>

  <Tab
                eventKey="geo"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                     Geo Insight
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>

  <Tab
                eventKey="photo"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                     Photo Insight
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>

  <Tab
                eventKey="user"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                     User Insight
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>
  <Tab
                eventKey="video"
                title={
                  <span>
                    <i
                      className="fa fa-table"
                      style={{ marginRight: "10px" }}
                    />
                    Video Insights
                  </span>
                }
              >
                <ChannelDashboard />
              </Tab>

</Tabs>

Answer 1

您找到解决方案了吗？我也发现了这个问题。