Question

我的React应用程序中有一个菜单，这里是// What Template Function in C++11? // Implicit Conversion unsigned long z = bitset<4>("1010");组件：

Menu

当我单击菜单项时，被单击的项将变为高亮显示（粗体）。但是，如果我在URL中有一些页面（例如class Menu extends React.Component { constructor(props) { super(props); this.state = { active: '/' } } render() { return ( <nav> <ul className='list-inline'> <li> <Link to='/' style={this.state.active === '/' ? activeStyle : {}} onClick={this.handleClick.bind(this, '/')}> Home </Link> </li> <li> <Link to='/contact' style={this.state.active === 'contact' ? activeStyle : {}} onClick={this.handleClick.bind(this, 'contact')}> Contact </Link> </li> ) } } export default Menu）并刷新页面，则菜单中的http://localhost:3001/contact项不会突出显示（因为突出显示是基于Contact事件）。

我尝试使用onClick解析URL的内容，然后尝试显示URL的内容：

import * as qs from 'query-string'; // for fetching the URL paramaters

但是输出仅为console.log(qs.parse(location.search));而不是所需的{}（因此我可以在菜单中突出显示此项目）。

因此，当直接加载URL（无需单击相应菜单项）时，如何解决这种情况并突出显示相应菜单项？

谢谢

Answer 1

反应路由器具有完全适合这种情况的组件

https://reacttraining.com/react-router/web/api/NavLink

您可以将组件从Link更改为NavLink，并添加该组件将检查您所在的网址。

<Link to='/contact' style={this.state.active === 'contact' ? activeStyle : {}} onClick={this.handleClick.bind(this, 'contact')}>
  Contact
</Link>


<NavLink
  to="/contact"
  activeStyle={activeStyle}
>Contact</NavLink>

此外，您还可以从路由器实例检查URL参数：

https://reacttraining.com/react-router/web/example/url-params

ReactJS-如何获取URL中的当前页面？

1 个答案: