猿问

react-router-dom NavLink isActive不能正常工作

我们正在使用React.js进行项目。我正在使用react-router-dom配置多个页面,并且我想使用NavLink更改当前活动的图标。


icon + sel用于活动页面。


render() {


  const oddEvent = (match, location) => {

    if (!match) {

      console.log(!match)

      return false


    }

    else{

      console.log(!match)

    }

    const eventID = parseInt(match.params.eventID)

    return !isNaN(eventID) && eventID % 2 === 1

    console.log(eventID)

  }


  return (

      <fragment>

        <div className="bottom noright">

          <div className="bottomcontents">

            <div className="bottomicon">

                <NavLink className="bottomiconinside bottomiconinsideside" src={home} exact to="/" isActive={oddEvent}>

                <img className="iconcenter" src={!NavLink.match ? homesel : home}/>

                </NavLink>

                <NavLink className="bottomiconinside bottomiconinsideside" exact to="/about" isActive={oddEvent}>

                <img className="iconcenter" src={!NavLink.match ? searchsel : search}/>

                </NavLink>

                <NavLink className="bottomiconinside bottomiconinsideside" to="/about/foo" isActive={oddEvent} >

                <img className="iconcenter" src={!NavLink.match ? addsel : add}/>

                </NavLink>

                <NavLink className="bottomiconinside bottomiconinsideside" to="/posts" isActive={oddEvent}>

                <img className="iconcenter" src={!NavLink.match ? accountsel : account}/>

                </NavLink>

                <NavLink className="bottomiconinside bottomiconinsideside" exact to="/" isActive={oddEvent}>

                <img className="iconcenter" src={!NavLink.match ? settingsel : setting}/>

                </NavLink>

            </div>

            {/* <div className="search"></div>

            <div className="plus"></div>

            <div className="mypage"></div>

            <div className="setting"></div> */}

          </div>

        </div>

          </fragment>

    );

}


}


export default Bottom;


扬帆大鱼
浏览 289回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答