Question

我遇到活动链接问题。我需要创建几个子路由并在“父”路由上保持活动样式。我怎样才能做到这一点？

我正在使用withRouter进行路由。假设我有3个“父”路线的主导航 - /login | /register /profile。

 render () {
    return (
      <div className='grid'>
        <Route exact path='/' component={HomePage} />
        <Route path='/login' component={LoginForm} />
        <Route path='/register' component={RegisterForm} />
        <PrivateRoute path='/profile' component={PersonalDetails} />
        <PrivateRoute path='/profile/delete-account' component={DeleteAccount} />
        <PrivateRoute path='/profile/payments' component={Payments} />
        <PrivateRoute path='/profile/food-preferences' component={FoodPreferences} />
      </div>
    );
}

在'/ profile'路线上呈现的内部组件中，还有一个导航，其中包含指向'/profile/delete-account/'，'/profile/payments'，'profile/food-preferences'的链接。

static getProfileRoutes () {
    return profileRoutes.map(route => (
      <NavLink to={route.path} activeClassName='active-profile' className='profile-navigation-button' key={route.path}>
        <li className='profile-navigation-label'>{route.name}</li>
      </NavLink>
    ));
}

不幸的是，当我导航到其中一条“子”路线时，导航到SideBar的导航到'/profile'的按钮中的活动样式会丢失。我该怎样预防呢？修好了吗？

static getSideBarRoutes () {
    return sideBarRoutes.map(route => (
      <NavLink className='navigation-button' key={route.path} to={route.path}>
        <li className='navigation-item'>
          <div className={route.icon} />
          {route.name}
        </li>
      </NavLink>)
    );
}

路由工作非常正常 - active

错误导致Sidebar类丢失

非常感谢你的帮助。

Answer 1

例如

const navigation = (props) => {
  let styleClass= "not-active-class";
  if (props.location.pathname.indexOf(props.route) !== -1) {
    // checking if parent route is contained in route and setting active class
    styleClass= "active-class";
  }

  return (
    <NavLink
      to={props.route}
      activeClassName={styleClass} >
      <p>{props.route}</p>
    </NavLink>
  );
}

React Router v4 - 活动链接问题

1 个答案: