Reactjs 菜单问题。项目导航链接始终处于活动状态
我使用的是语义ui react,我使用的是NavLink和用于路由的Menu.Item 下面是我的导航栏组件:Reactjs 菜单问题。项目导航链接始终处于活动状态,reactjs,react-router,semantic-ui,semantic-ui-react,Reactjs,React Router,Semantic Ui,Semantic Ui React,我使用的是语义ui react,我使用的是NavLink和用于路由的Menu.Item 下面是我的导航栏组件: const Navbar = () => ( <div> <Container> <Menu secondary stackable widths={4}> <Menu.Item> <img src={Logo} alt="header" />
const Navbar = () => (
<div>
<Container>
<Menu secondary stackable widths={4}>
<Menu.Item>
<img src={Logo} alt="header" />
</Menu.Item>
<Menu.Item as={NavLink} to="/" name="home">
<Icon name="home" size="large" />
<p>Home</p>
</Menu.Item>
<Menu.Item as={NavLink} to="/data" name="data">
<Icon name="dashboard" size="large" />
<p>Dashboard</p>
</Menu.Item>
<Menu.Item as={NavLink} to="/user" name="user">
<Icon name="user" size="large" />
<p>User</p>
</Menu.Item>
</Menu>
</Container>
</div>
);
const导航栏=()=>(
家
仪表板
使用者
);
这就是问题所在。布线工作正常,但由于某些原因,“主页”菜单项始终处于活动状态
但是,其他两条路线工作正常(即,仅当路线正确时才将其设置为“激活”)
my App.jsx中的路由代码:
<Switch>
<Route exact path="/" component={Home} />
<Route path="/data" component={Dashboard} />
<Route path="/user" component={User} />
</Switch>
上面的照片应该给你一个问题的明确指示
任何意见都将不胜感激 可以从上面的AngelSalazar确认,这解决了它。谢谢大家!
<Menu.Item as={NavLink} exact to="/" name="home">
以下是我帮助解决问题的设置。 我遇到了以下错误:
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (created by MenuItem)
in MenuItem (at NavBar.js:47)
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (at NavBar.js:46)
in div (created by Menu)
in Menu (at NavBar.js:20)
in NavBar (at App.js:26)
in div (at App.js:25)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:24)
in div (at App.js:22)
in App (at index.js:6)
更新后:
<Menu.Item
as={NavLink}
to="/bills"
name='bills'
active={activeItem === 'bills'}
onClick={this.handleItemClick}>
<Icon name="payment"/>Login
</Menu.Item>
登录
将精确道具添加到菜单中Item@AngelSalazar谢谢,我的朋友刚刚遇到这种行为!你解决了!只有当导航组件在MapStateToProps中设置了状态时,它才对我有效,不是吗?
class NavBar extends Component{
constructor(){
super();
this.state={
activeItem: "home"
}
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu>
<NavLink to="/bills">
<Menu.Item
name='bills'
active={activeItem === 'bills'}
onClick={this.handleItemClick}>
<Icon name="payment"/>Bills
</Menu.Item>
<Menu>
as={NavLink}
to="bills"
<Menu.Item
as={NavLink}
to="/bills"
name='bills'
active={activeItem === 'bills'}
onClick={this.handleItemClick}>
<Icon name="payment"/>Login
</Menu.Item>