React Bootstrap 和深度链接选项卡答案

【问题标题】：React Bootstrap and deep linking tabsReact Bootstrap 和深度链接选项卡
【发布时间】：2020-03-06 08:42:31
【问题描述】：

我正在尝试链接到页面上的选项卡，但我对如何执行此操作有点迷茫。它似乎在任何地方都没有记录，我似乎无法靠自己的力量让它工作。我已经尝试从较低级别的 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>

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

任何指导都会有所帮助。

【问题讨论】：

标签： javascript reactjs react-bootstrap

【解决方案1】：

我设法弄明白了。

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

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);
    }, []);

【讨论】：