代码之家  ›  专栏  ›  技术社区  ›  fuzzybear

来自React路由器Dom Home的NavLink始终处于活动状态

  •  0
  • fuzzybear  · 技术社区  · 8 年前

    导航工作,主链接始终处于活动状态,其他链接正常。 添加为组件,无道具。

    HTML

     <Menu/>
    

    CSS

    .active{
    background-color:#ff6a00;
    }
    

    JS公司

    import React, { Component } from 'react';
    import './menu.css';
    import { NavLink } from 'react-router-dom'
    export default class TopMenu extends Component {
    
     render() {
        return (
            <div className="ui container">
                <div className="ui stackable menu">
                    <div className="item">
                        <NavLink to='/' >
                            <i aria-hidden="true" className="home  icon" ></i>
                            Home
                         </NavLink>
                    </div>
                    <div className="item">
                        <NavLink to='/about' >
                            <i aria-hidden="true" className="circle info  icon" > 
                            </i>
                            About
                        </NavLink>
                    </div>
    
                    <div className="item" >
                        <NavLink to='/Settings'>
                            <i aria-hidden="true" className="cogs icon red" ></i>
                            Settings
                        </NavLink>
                    </div>
                </div>
            </div>
         );
       }
     }
    

    有人想,为什么家总是很活跃?

    1 回复  |  直到 8 年前
        1
  •  8
  •   AngelSalazar    8 年前

     <NavLink to='/' exact={true}>
       <i aria-hidden="true" className="home  icon" ></i>
       Home
     </NavLink>