如何在父菜单项活动的Navbar包装器中解决这个错误？ [英] How could I solve this error in Wrapper of Navbar with Parent MenuItem Active?

问题描述

我有下一个问题。如果我有两条或更多路由有共同的部分（例如 / hello ; / hello / 1 ; code> / hello / 1/2 ;），我进入： / hello / 1/2 / how_are_you 他们（他们）被标记为活动（由于所有路线都包含在路线中第三路线（第二路线（第一路线（/ hello）/ 1）/ 2）/ how_are_you ），当我只想被标记为相应的路由，他的父亲（ / hello / 1/2 -3rd route-）。我如何解决这个问题？

这是我的Wrapper代码：

  import {Link，IndexLink，withRouter} 
 
 
导出默认类MenuNavItem extends React.Component {
 constructor（）{
 super（）; 
} 
 
 render（）{
 const {router，index，to，children，... props} = this.props; 
 let isActive = false; 
 
 if（router.isActive（'./'，true）&& index）{
 isActive = true; 
} else {
 isActive = router.isActive（to）; 
} 
 
 //这行生成错误
 if（window.location.pathname.includes（to））{
 isActive = true; 
} 
 
 const LinkComponent = index？ IndexLink：Link; 
 
 return（
< li className = {isActive？'active'：''}> 
< LinkComponent to = {to} {... props}> ; {children}< / LinkComponent> 
< / li> 
）; 
} 
} 
 
 MenuNavItem = withRouter（MenuNavItem）; 
  

这是我的MenuItem代码：

  / ... 
< MenuNavItem to ='/ hello'> Hello< / MenuNavItem> 
< MenuNavItem to ='/ hello / 1'> Hello1< / MenuNavItem> 
< MenuNavItem to ='/ hello / 1/2'> Hello12< / MenuNavItem> 
 / ... 
  

我在路上： /你好/ 1/2 / how_are_you ，我想只有设置为活动的第三个MenuNavItem（ - / hello / 1/2 - 它是他的父亲，而不是他人）

解决方案

我解决了。我有两个问题：

• 如果我有两个或更多路由具有共同的部分和不同的深度，它们都被标记作为活跃。这个问题解决了：@mrinalmech。这是他的解决方案：

  
  
  

  let currentPath = window.location.pathName

  
  
  

  let depth =（currentPath.split（/）。length - 1）

  
  
  

  let toDepth =（to.split（/）。length - 1）

  
  
  

  if（currentPath.includes（to）& amp; toDepth === depth-1）{
isActive = true;
}




• 如果我有两个或更多路由具有共同的部分和相同的深度，那么它们都被标记作为活跃。我解决了这个添加到@ mrinalmech的asnwer这里：

  
  
  

  let father = currentPath.substring（0，currentPath.lastIndexOf（/））;

  
  
  

  if（depth-1 === toDepth&& parent == to）{
isActive = true;
}

I have next problem. If I have two or more routes that have a common part (eg /hello; /hello/1; /hello/1/2;) and I get into: /hello/1/2/how_are_you they (all they) are marked as active (due to all routes is included in the route 3rd route(2nd route(1st route(/hello)/1)/2)/how_are_you), when I just want to be marked as active the corresponding route, his father (/hello/1/2 -3rd route-). How could I solve this?

This is my Wrapper code:

import React from 'react'
import { Link, IndexLink, withRouter } from 'react-router'


export default class MenuNavItem extends React.Component {
constructor() {
    super();
}

render() {
    const { router, index, to, children, ...props } = this.props;
    let isActive = false;

    if (router.isActive('./', true) && index) {
        isActive = true;
    } else {
        isActive = router.isActive(to);
    } 

        // THIS LINE IS PRODUCING THE ERROR
        if (window.location.pathname.includes(to)) {
            isActive = true;
        }

    const LinkComponent = index ?  IndexLink : Link;

    return (
        <li className={isActive ? 'active' : ''}>
            <LinkComponent to={to} {...props}>{children}</LinkComponent>
        </li>
    );
}
}

MenuNavItem= withRouter(MenuNavItem);

this is my MenuItem code:

/...
<MenuNavItem to='/hello'>Hello</MenuNavItem>
<MenuNavItem to='/hello/1'>Hello1</MenuNavItem>
<MenuNavItem to='/hello/1/2'>Hello12</MenuNavItem>
/...

I am on the route: /hello/1/2/how_are_you and I want that only set as active the third MenuNavItem (- /hello/1/2 - that it is his father, not others)

解决方案

I solved it. I have two problems:

• If I have two or more routes that have a common part and different depth, all they are marked as active. This problem was solved by: @mrinalmech. This is his solution:

  let currentPath = window.location.pathName

  let depth = (currentPath.split("/").length - 1)

  let toDepth = (to.split("/").length - 1)

  if (currentPath.includes(to) && toDepth === depth-1) { isActive = true; }

• If I have two or more routes that have a common part and same depth, all they are marked as active. I solved this adding to @mrinalmech's asnwer this:

  let father = currentPath.substring(0, currentPath.lastIndexOf("/"));

  if (depth-1 === toDepth && father == to) { isActive = true; }

这篇关于如何在父菜单项活动的Navbar包装器中解决这个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！