使用 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;

Answer 1

<BrowserRouter>
            <Tab.Container defaultActiveKey="">
                  <Nav>
                      <Nav.Item>
                          <Nav.Link eventKey="users" as={Link} to={`/workhub/Users`}>Users</Nav.Link>
                      </Nav.Item>
                      <Nav.Item>
                          <Nav.Link eventKey="profiles" as={Link} to={`/workhub/Profiles`}>Profiles</Nav.Link>
                      </Nav.Item>
                      <Nav.Item>
                          <Nav.Link eventKey="errorcodes" as={Link} to={`/workhub/ErrorCodes`}>Error Codes</Nav.Link>
                      </Nav.Item>
                  </Nav>
              </Tab.Container>
              <Tab.Content>
                  <Routes>
                      <Route path={`/workhub/Users`} element={ <Users/> } />
                      <Route path={`/workhub/Profiles`} element={ <Profiles/> } />
                      <Route path={`/workhub/ErrorCodes`} element = { <ErrorCodes/> } />
                  </Routes>
              </Tab.Content>
          </div>
        </BrowserRouter>