Javascript React引导和深度链接选项卡

我试图链接到页面上的一个标签，但我有点不知道如何去做。它似乎在任何地方都没有被记录下来，而且我自己也无法让它运行起来。我尝试过从低级tabs api转换为nav.items组件，并按照github上一篇文章的建议插入了href而不是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>

表1
表2
首先

第二

但是，当我访问

/mypage#second

时，它不会打开该选项卡上的页面

---

任何指导都会有帮助。

我设法弄明白了

我设置了捕获参数的路径，即：

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>

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

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

---

我设法弄明白了

我设置了捕获参数的路径，即：

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>

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

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