javascript - 使用 React Bootstrap 选项卡反应嵌套路由

Question

我想将路由添加到我的画廊。我在我的页面上使用 Bootstrap 选项卡，每个选项卡都有一个用于不同类别图片的不同轮播。我想添加路由，这样用户就不会下载所有图片，而只会下载他选择的部分。

所以我使用 Tab.Container、Tab.Content、Tab.Pane 的方法。当用户选择每个链接时，#category 会添加到链接中，但我的 Route 不会加载组件，甚至不会呈现简单的文本。我不知道怎么了。

幻灯片使用适当的 eventKey 包装在 Tab.Pane 中。

图库内容代码：

import {Link, Switch, Route, useRouteMatch} from 'react-router-dom';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

import SchodySlideShow from './../../components/Slideshows/SchodySlideshow';
import PlytkiSlideShow from './../../components/Slideshows/PlytkiSlideshow';
import BalkonSlideShow from './../../components/Slideshows/BalkonSlideshow';
import OtherSlideShow from './../../components/Slideshows/OtherSlideshow';
import { Nav } from 'react-bootstrap';

const Gallery = () =>{
    let match = useRouteMatch();
    return (
        <React.Fragment>
            {/*
                 The old version how it was done (and it worked)
                <Tabs >
                    <Tab eventKey="Schody" title="Schody" className="tab-panel">
                       <SchodySlideShow />
                    </Tab>
                    <Tab eventKey="Płytki" title="Płytki" className="tab-panel">                        
                        <PlytkiSlideShow />
                    </Tab>
                    <Tab eventKey="Balkony" title="Balkony" className="tab-panel">
                       <BalkonSlideShow />
                    </Tab>
                    <Tab eventKey="Specjalne Zamówienia" title="Specjalne Zamówienia" className="tab-panel">                        
                        <OtherSlideShow />
                    </Tab>
                </Tabs>
            */}
            <Tab.Container defaultActiveKey="schody">
                <Nav>
                    <Nav.Item>
                        <Nav.Link eventKey="schody" as={Link} to={`${match.url}#schody`}>Schody</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link eventKey="balkony" as={Link} to={`${match.url}#balkony`}>Balkony</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link eventKey="plytki" as={Link} to={`${match.url}#plytki`}>Płytki</Nav.Link>
                    </Nav.Item>
                </Nav>
            </Tab.Container>
            <Tab.Content>
                <Switch>
                    <Route path={`${match.url}#schody`} component={SchodySlideShow} />
                    <Route path={`${match.url}#balkony`} component={BalkonSlideShow } />
                    <Route path={`${match.url}#plytki`} component = {PlytkiSlideShow} />
                </Switch>
                                
            </Tab.Content>
        </React.Fragment>
        
            
        
    );
}

export default Gallery;

标签： javascriptreactjsreact-router-domreact-bootstrap