Reactjs 使用导航选项卡，当我在React引导中选择另一个选项卡时，始终选择第一个选项卡_Reactjs_Twitter Bootstrap_React Bootstrap

Reactjs 使用导航选项卡，当我在React引导中选择另一个选项卡时，始终选择第一个选项卡

reactjs twitter-bootstrap

Reactjs 使用导航选项卡，当我在React引导中选择另一个选项卡时，始终选择第一个选项卡,reactjs,twitter-bootstrap,react-bootstrap,Reactjs,Twitter Bootstrap,React Bootstrap,我在react bootstrap代码中遇到Nav问题，如下所示： 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 '../NavbarDefa

我在

react bootstrap

代码中遇到

Nav

问题，如下所示：

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>
    );
}

从“React”导入React；
从“react router dom”导入{NavLink，useRouteMatch}；
从“react引导/容器”导入容器；
从“反应引导/Nav”导入Nav；
从“../NavbarDefault/NavbarDefault”导入NavbarDefault；
从“../DashboardSwitch/DashboardSwitch”导入仪表板开关；
常量仪表板=（）=>{
const{url}=useRouteMatch（）；
返回(
家
奖金库
新页
我的页面
我的帐户
);
};
导出默认仪表板；
常量仪表板开关=（）=>{
const{path}=useRouteMatch（）；
返回(
);
}

页面之间的导航似乎有效，但对于选项卡UI，始终选择“主页”选项卡：

我已经删除了

defaultActiveKey

道具，但问题仍然存在。我做错了什么？

这是因为每个路径都与

${url}

路径匹配

例如，如果您有一个名为

/test

的页面和另一个名为

/test-2

的页面，那么单击转到

/test-2

的页面也会激活转到

/test

的选项卡，因为

/test

包含在

/test-2

中

将道具

exact

传递给您

HOME

NavLink，您将不会再看到它被选中，除非路径是exact

${url}

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

家