React Bootstrap和深度链接选项卡

Question

我正试图链接到页面上的一个选项卡，但我有点不知所措。它似乎没有在任何地方被记录下来，我似乎也无法独自完成它。我已经尝试从较低级别的选项卡api转换为nav.items组件，并插入href而不是github上一篇问题帖子中建议的eventKey。

<Tab.Container id="left-tabs-example" defaultActiveKey="#first">
    <Row>
        <Col sm={3}>
            <Nav variant="pills" className="flex-column">
                <Nav.Item>
                    <Nav.Link href="#first">Tab 1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link href="#second">Tab 2</Nav.Link>
                </Nav.Item>
            </Nav>
        </Col>
        <Col sm={9}>
            <Tab.Content>
                <Tab.Pane eventKey="#first">
                    <p>first</p>
                </Tab.Pane>
                <Tab.Pane eventKey="#second">
                    <p>second</p>
                </Tab.Pane>
            </Tab.Content>
        </Col>
    </Row>
</Tab.Container>

然而，当我访问/mypage#second时，它不会打开该选项卡上的页面。

任何指导都会有所帮助。

Answer 1

我设法弄明白了。

我设置了我的路线来捕获参数ie:mypage/:params，然后在我的组件中捕获它作为道具传递参数ie:

const Applications = ({match}) => {
 ...
}

然后我按如下方式设置我的选项卡：

<Tabs id="controlled-tab-example" activeKey={key} onSelect={k => setKey(k)}>
    <Tab eventKey="all" title="All">
        <p>First</p>
    </Tab>
    <Tab eventKey="first" title="First">
        <p>Second</p>
    </Tab>
    <Tab eventKey="second" title="Second">
        <p>Third</p>
    </Tab>
</Tabs>

初始状态

const [key, setKey] = useState('all');

然后在useEffect上，我捕获参数并将其设置为状态。

useEffect(() => {
        setKey(match.params.id);
    }, []);