Question

我试图链接到页面上的选项卡，但我对如何执行此操作有些迷茫。它似乎没有记录在任何地方，我似乎也无法自行解决。我已经尝试从较低级别的标签api转换为nav.items组件，并插入href而不是eventKey，如github上的一则帖子所建议的那样。

<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

我设法弄清楚了。

我设置了捕获参数的路径，即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);
    }, []);

React Bootstrap和深层链接选项卡

1 个答案: