来自 react-router-dom Home 的 Navlink 始终处于活动状态 [英] Navlink from react-router-dom Home always active

查看：43
本文介绍了来自 react-router-dom Home 的 Navlink 始终处于活动状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

导航有效，主页链接始终处于活动状态，其他链接正常.添加为组件，无道具.

HTML

 <菜单/>

CSS

.active{背景色:#ff6a00；}

JS

import React, { Component } from 'react';导入'./menu.css';从'react-router-dom' 导入 { NavLink }导出默认类 TopMenu 扩展组件 {使成为() {返回 (<div className="ui 容器"><div className="ui 可堆叠菜单"><div className="item"><NavLink to='/' ><i aria-hidden="true" className="home icon" ></i>家</NavLink>

<div className="item"><NavLink to='/about' ><i aria-hidden="true" className="圆圈信息图标" ></i>关于</NavLink>

<div className="item" ><i aria-hidden="true" className="cogs icon red" ></i>设置</NavLink>

);}}

任何人的想法，为什么家里总是活跃的?

解决方案

你必须为你的家乡路线/"指定确切的道具，因为这匹配所有其他路由，这就是为什么/"始终处于活动状态.

 <i aria-hidden="true" className="home icon" ></i>家</NavLink>

Nav works, home link is always active other links are OK. Adding as component, no props.

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>
     );
   }
 }

Ideas anyone, why is home always active ?

解决方案

you have to specify the exact prop for your home route '/' because this matches all the other routes, that's why '/' is always active.

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

这篇关于来自 react-router-dom Home 的 Navlink 始终处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆