Question

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

这是我的路由文件


<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>

SidebarLink组件


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

当前，我的home组件始终保持活动状态。我在做什么错了？

Answer 1

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

NavLink exact

为true时，仅在以下位置使用有效的类/样式完全匹配。

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

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

1 个答案: