导航链接的某些路线始终保持活动状态

Question

Navlink 的默认功能是，它将活动添加到当前活动的组件。但就我而言，无论是否处于活动状态，我的两条路线始终保持活动状态。我检查了我的路由文件，但不知道为什么会这样。所需的行为是活动的 class 仅添加到当前活动的那些路线上。

这是我的路由文件


<HashRouter>
                <Switch>
                    <Route path="/" exact component={Login} />
                    <Route path="/login" component={Login} />
                    <Route path="/sign-up" component={SignUp} />
                    <Route path="/forget-password" component={ForgetPassword} />
                    <Route path="/verification-code" component={VerificationCode} />
                    <Route path="/reset-password" component={ResetPassword} />
                    <Route path="/password-reset-success" component={SuccessPassword} />
                    <Route path="/dashboard" component={Dashboard} />
                </Switch>
            </HashRouter>


<Switch>
                <Route path="/dashboard" exact component={Homepage} />
                <Route path="/dashboard/check-in" component={CheckIn} />
                <Route path="/dashboard/deals" component={Deals} />
                <Route path="/dashboard/events" component={Events} />
                <Route path="/dashboard/invoice" component={Invoice} />
                <Route path="/dashboard/notification" component={Notification} />
                <Route path="/dashboard/profile" component={Profile} />
                <Route path="/dashboard/profile/forget-password" component={ResetPassword} />
                <Route path="/dashboard/redemption"  component={Redemptions} />
                <Route path="/dashboard/restriction-management" component={RestrictionManagement} />
                <Route path="/dashboard/create-event" component={CreateEventForm} />
                <Route path="/dashboard/venue-setting" component={VenueForm} />
                <Route path="/dashboard/new-user" component={NewUserDetail} />
                   </Switch>

                   <div>
                    <SidebarLink 
                      title="Home" 
                      pagelink="/dashboard" 
                      icon={}
                     />
                     <SidebarLink 
                      title="Profile" 
                      pagelink="/dashboard/profile" 
                      icon={}
                     />
                     <SidebarLink 
                      title="Events" 
                      pagelink="/dashboard/events" 
                      icon={}
                     />
                     <SidebarLink 
                      title="Deals" 
                      pagelink="/dashboard/deals" 
                      icon={}
                     />
                     <SidebarLink 
                      title="Redemption" 
                      pagelink="/dashboard/redemption" 
                      icon={}
                     />
                      <SidebarLink 
                      title="SignOut" 
                      pagelink="/" 
                      icon={}
                      click={this.manageSignOut}
                     />
</div>

侧边栏链接组件


<NavLink to={this.props.pagelink} onClick={this.props.click} className="color-white roboto">
                        <object>
                          {
                              this.props.icon
                          }
                        </object>
                        {this.props.title}
                        </NavLink>

目前，我的主页组件始终处于活动状态。我做错了什么？

Answer 1

您可能需要在导航链接上指定 exact 道具

NavLink exact

When true, the active class/style will only be applied if the location is matched exactly.

<NavLink exact to="/dashboard" />
<NavLink exact to="/dashboard/check-in" />
<NavLink exact to="/dashboard/deals" />
...

导航链接的某些路线始终保持活动状态

Some route of navlinks always remain active

reactjs

typescript

react-router-dom

react-router-v4