Menu
I create a menu and want to highlight the item which i choose,and i did it. But when i press back/forward button,the menu item don't highlight. What should i do?
I have tried to use addEventListener but failed.
Have someone could give some advice?
class Sidebar extends React.Component { constructor(props) { super(props); this.state={ test: "home" } this.menuClickHandle = this.menuClickHandle.bind(this); } componentWillMount(){ hashHistory.listen((event)=>{ test1 = event.pathname.split("/"); }); this.setState({ test:test1[1] }); } menuClickHandle(item) { this.props.clickItem(item.key); } onCollapseChange() { this.props.toggle(); } render() { var {collapse} = this.props; return ( <aside className="ant-layout-sider"> <Menu mode="inline" theme="dark" defaultSelectedKeys={[this.state.test || "home"]} onClick={this.menuClickHandle.bind(this)}> <Menu.Item key="home"> <Link to="/home"> <Icon type="user"/><span className="nav-text">用户管理</span> </Link> </Menu.Item> <Menu.Item key="banner"> <Link to="/banner"> <Icon type="setting"/><span className="nav-text">Banner管理</span> </Link> </Menu.Item> </Menu> <div className="ant-aside-action" onClick={this.onCollapseChange.bind(this)}> {collapse ? <Icon type="right"/> : <Icon type="left"/>} </div> </aside> ) } } 
383
To go back to the previous page, pass -1 as a parameter to the navigate() function, e.g. navigate(-1) . Calling navigate with -1 is the same as hitting the back button. Similarly, you can call the navigate function with -2 to go 2 pages back.
To detect previous path in React Router, we can set the state property to an object with the location. pathname as the value. <Link to={{ pathname: "/nextpath", state: { prevPath: location.
To navigate to the courses route, we will use the history. push method of the useHistory object. We will add an event handler “onClick” for our button component and define a function “coursesPage ” that handles the click event. The coursesPage function enables us to redirect to another route on clicking the button.
React Router switches from server-side to client-side routing, so when you click on the Link component, the app checks the route and loads the requested component without reloading the full page in the browser.
I could come up with a solution using WithRouter
import React,{ Component } from 'react'; import { NavLink, withRouter } from 'react-router-dom'; import { Layout, Menu, Icon } from 'antd'; import PropTypes from 'prop-types'; const { Sider } = Layout; class SideMenu extends Component{ static propTypes = { location: PropTypes.object.isRequired } render() { const { location } = this.props; return ( <Sider trigger={null} collapsible collapsed={this.props.collapsed}> <div className="logo" /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['/']} selectedKeys={[location.pathname]}> <Menu.Item key="/"> <NavLink to="/"> <Icon type="home" /> <span>Home</span> </NavLink> </Menu.Item> <Menu.Item key="/other"> <NavLink to="/other"> <Icon type="mobile"/> <span>Applications</span> </NavLink> </Menu.Item> <Menu.Item key="/notifications"> <NavLink to="/notifications"> <Icon type="notification" /> <span>Notifications</span> </NavLink> </Menu.Item> </Menu> </Sider> ) } } export default withRouter(SideMenu); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
