react-router + antD /戻る/進むボタンを押したときにメニュー項目を強調表示する方法は？

Question

私はメニューを作成し、私が選択したアイテムを強調表示したいと思いました。しかし、戻る/進むボタンを押すと、メニュー項目は強調表示されません。私は何をすべきか？

addEventListenerを使用しようとしましたが、失敗しました。

誰かに助言を与えることができますか？

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

Answer 1

現在のURLを傍受し、次に選択したキーを設定します（defaultSelectedKeysではないことに注意してください）。

componentWillMount(){ 
     hashHistory.listen((event)=>{ 
      pathname = event.pathname.split("/"); 
      if(pathname != null){ 
       this.setState({ 
        test:pathname[1] 
       }); 
      } 
     }); 
    } 

Answer 2

私はこのようなことをしますが、反応しないようです。メニュー項目からではなくボタンを使用して新しいページに移動する場合と同様に、ページが更新されるまでアクティブリンクは更新されません。

import React from 'react'; 
import { StyleSheet, css } from 'aphrodite' 
import { browserHistory, Link } from 'react-router'; 
import 'antd/lib/menu/style/css'; 
import 'antd/lib/icon/style/css'; 
import 'antd/lib/row/style/css'; 
import 'antd/lib/col/style/css'; 
import 'antd/lib/message/style/css'; 
import { appConfig } from '../../modules/config'; 
import { Menu, Icon, Row, Col, message } from 'antd'; 

const SubMenu = Menu.SubMenu; 
const MenuItemGroup = Menu.ItemGroup; 


const { appName } = appConfig; 




const AppNavigation = React.createClass({ 
    getInitialState() { 
     return { 
      current: this.props.pathname 
     }; 

    }, 
    handleClick(e) { 
    browserHistory.push(e.key); 
    this.setState({ current: e.key }); 
    return; 
    }, 
    render() { 
    return (
    <Row className='landing-menu' type="flex" justify="space-around" align="middle" style={{height: 55, zIndex: 1000, paddingLeft: 95, color: '#fff', backgroundColor: '#da5347', borderBottom: '1px solid #e9e9e9'}}> 
     <Col span='19'> 
      <Link to='/'> 
      <h2 style={{fontSize: 21, color: '#fff'}}> 
      {appName} 
      <Icon type="rocket" color="#fff" style={{fontWeight: 200, fontSize: 26, marginLeft: 5 }}/> 
      </h2> 
     </Link> 
     </Col> 
     <Col span='5'> 
      <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal" style={{height: 54, backgroundColor: '#da5347', borderBottom: '0px solid transparent'}}> 
      <Menu.Item style={{height: 54, }} key="/">Home</Menu.Item> 
      <Menu.Item style={{height: 54, }} key="/signup">Signup</Menu.Item> 
      <Menu.Item style={{height: 54, }} key="/login">Login</Menu.Item> 
      </Menu> 
     </Col> 

     </Row> 
    ); 
    }, 
}); 


export const App = React.createClass({ 

    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    componentWillMount(){ 
    if (Meteor.userId()) { 
     browserHistory.push('/student/home') 
    } 
    }, 
    render() { 

    return (
     <div style={{position: 'relative'}}> 
      <AppNavigation pathname={this.props.location.pathname} /> 
      <div style={{minHeight: '100vh'}}> 
      { this.props.children } 
      </div> 
     </div> 
    ); 
    } 





}); 

EDIT：

下記かなりうまく動作します。 selectedKeys

import React from 'react'; 
import { StyleSheet, css } from 'aphrodite' 
import { browserHistory, Link } from 'react-router'; 
import 'antd/lib/menu/style/css'; 
import 'antd/lib/icon/style/css'; 
import 'antd/lib/row/style/css'; 
import 'antd/lib/col/style/css'; 
import 'antd/lib/message/style/css'; 
import { appConfig } from '../../modules/config'; 
import { Menu, Icon, Row, Col, message } from 'antd'; 

const SubMenu = Menu.SubMenu; 
const MenuItemGroup = Menu.ItemGroup; 


const { appName } = appConfig; 




const AppNavigation = React.createClass({ 
    getInitialState() { 
     return { 
      current: this.props.pathname 
     }; 

    }, 
    handleClick(e) { 
    browserHistory.push(e.key); 
    this.setState({ current: e.key }); 
    return; 
    }, 
    render() { 
    return (
    <Row className='landing-menu' type="flex" justify="space-around" align="middle" style={{height: 55, zIndex: 1000, paddingLeft: 95, color: '#fff', backgroundColor: '#da5347', borderBottom: '1px solid #e9e9e9'}}> 
     <Col span='19'> 
      <Link to='/'> 
      <h2 style={{fontSize: 21, color: '#fff'}}> 
      {appName} 
      <Icon type="rocket" color="#fff" style={{fontWeight: 200, fontSize: 26, marginLeft: 5 }}/> 
      </h2> 
     </Link> 
     </Col> 
     <Col span='5'> 
      <Menu onClick={this.handleClick} selectedKeys={[this.props.pathname]} mode="horizontal" style={{height: 54, backgroundColor: '#da5347', borderBottom: '0px solid transparent'}}> 
      <Menu.Item style={{height: 54, }} key="/">Home</Menu.Item> 
      <Menu.Item style={{height: 54, }} key="/signup">Signup</Menu.Item> 
      <Menu.Item style={{height: 54, }} key="/login">Login</Menu.Item> 
      </Menu> 
     </Col> 

     </Row> 
    ); 
    }, 
}); 


export const App = React.createClass({ 

    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    componentWillMount(){ 
    if (Meteor.userId()) { 
     browserHistory.push('/student/home') 
    } 
    }, 
    render() { 

    return (
     <div style={{position: 'relative'}}> 
      <AppNavigation pathname={this.props.location.pathname} /> 
      <div style={{minHeight: '100vh'}}> 
      { this.props.children } 
      </div> 
     </div> 
    ); 
    } 


}); 

Answer 3

に小道具として、私は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"> 
       <Icon type="mobile"/> 
       <span>Applications</span> 
      </Menu.Item> 
      <Menu.Item key="/notifications"> 
       <NavLink to="/notifications"> 
       <Icon type="notification" /> 
       <span>Notifications</span> 
       </NavLink> 
      </Menu.Item> 
      </Menu> 
     </Sider> 
    ) 
    } 
} 

export default withRouter(SideMenu); 

を使用して解決策を考え出すことができると、ルータを反応させ、ポップからのパス名を伝承