Используя вкладки Nav, первая вкладка всегда выбирается, когда я выбираю другую вкладку в React Bootstrap

Question

У меня проблема с Nav в react-bootstrap коде, как показано ниже:

import React from 'react';
import { NavLink, useRouteMatch } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import NavbarDefault from '../NavbarDefault/NavbarDefault';
import DashboardSwitch from '../DashboardSwitch/DashboardSwitch';

const Dashboard = () => {
    const { url } = useRouteMatch();

    return (
        <div>
            <div className="bg-light">
                <Container fluid>
                    <NavbarDefault />
                </Container>
            </div>

            <Container fluid>
                <Nav className="mt-4" variant="tabs">
                    <Nav.Item>
                        <Nav.Link 
                            as={NavLink} 
                            to={`${url}`} 
                            eventKey="link-1"
                        >
                            HOME
                        </Nav.Link >
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link 
                            as={NavLink} 
                            to={`${url}/bonus`} 
                            eventKey="link-2"
                        >
                            BONUS LIBRARY
                        </Nav.Link >
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link 
                            as={NavLink} 
                            to={`${url}/newpage`} 
                            eventKey="link-3"
                        >
                            NEW PAGE
                        </Nav.Link >
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link 
                            as={NavLink} 
                            to={`${url}/mypages`} 
                            eventKey="link-4">
                            MY PAGES
                        </Nav.Link >
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link 
                            as={NavLink} 
                            to={`${url}/account`} 
                            eventKey="link-5"
                        >
                            MY ACCOUNT
                        </Nav.Link >
                    </Nav.Item>
                </Nav>
            </Container>

            <DashboardSwitch />
        </div>
    );
};

export default Dashboard;

const DashboardSwitch = () => {
    const { path } = useRouteMatch();

    return (
        <Switch>
            <ProtectedRoute exact path={`${path}`} component={Home} />
            <ProtectedRoute exact path={`${path}/home`} component={Home} />
            <ProtectedRoute exact path={`${path}/bonus`} component={Bonuses} />
            <ProtectedRoute exact path={`${path}/newpage`} component={NewPage} />
            <ProtectedRoute exact path={`${path}/mypages`} component={MyPages} />
            <ProtectedRoute exact path={`${path}/account`} component={Account} />
            <Route path="*"><NotFound /></Route>
        </Switch>
    );
}

Навигация между страницами, похоже, работает, но для пользовательского интерфейса вкладки всегда выбирается вкладка HOME:

Я уже удалил опору defaultActiveKey, но проблема все еще сохраняется. Что я здесь делаю не так?

Answer 1

Это потому, что каждый путь соответствует пути ${url}.

Например, если у вас есть страница с именем /test и другая с именем /test-2, щелкнув страницу, которая ведет к /test-2 активирует вкладку, которая идет на /test, так как /test входит в /test-2.

Передайте опору exact вам HOME NavLink, и вы больше не увидите, что она выбрана если путь не точен ${url}.

<Nav.Link 
  as={NavLink} 
  to={`${url}`} 
  eventKey="link-1"
  exact // add this
>
  HOME
</Nav.Link >