React 嵌套路由与 React Bootstrap 选项卡

Question

I wanted to add routing to my gallery. I am using Bootstrap Tabs on my page, and each tab has a different Carousel for a different category of pictures. I want to add routing so that the user doesn't download all the pictures but only the part he has selected.

So I am using the approach with Tab.Container, Tab.Content, Tab.Pane. When user selects each link the #category is added to the link, but my Route do not load the component, not even render a simple text. I don't know what's wrong.

The SlideShows are wrapped in Tab.Pane with a proper eventKey.

Gallery content code:

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>