使用react-redux实现根据地址栏选择导航及页面展示

废话不多，直接上货

MyMenu

class MyMenu extends React.Component {

  state={
    menu:'1'
  }
  handleClick = (e) => {
   // console.log('click ', e.key);
    this.setState({menu:e.key})
  }
componentWillMount() {
// if(sessionStorage.getItem('userid')==null||sessionStorage.getItem('userid')==undefined){
//   this.context.router.push("/");
// }

if(this.props.menuandcrumb) {
  this.setState({
    menu: this.props.menuandcrumb.menu,
  });
}else{
  this.setState({
    menu: "1",
  });

}

if(this.props.login&&(!this.props.login.roleid)){
  this.context.router.push('/login' );
   }
 }

  componentWillReceiveProps(nextProps) {
    if(nextProps.menuandcrumb)
      this.setState({
        menu: nextProps.menuandcrumb.menu,
    });
  }


  render() {
   // console.log(this.props.login.roleid )
    return (
  <div className={siderstyle.menu} >
   <Menu
      onClick={this.handleClick}
      style={{ width: 256 }}
      defaultSelectedKeys={[this.state.menu]}
      selectedKeys={[this.state.menu]}
      mode="inline"
    >
      <MenuItemGroup key="key1" title={<span className={siderstyle.title}><img src={img1}/>组织架构</span>}>
        <Menu.Item key="1" className={siderstyle.menuitem}><Link to="/user"/>用户管理</Menu.Item>
           <Menu.Item key="2" className={siderstyle.menuitem}><Link to="/role"/>角色管理</Menu.Item>
      </MenuItemGroup>
                <MenuItemGroup key="key2" title={<span className={siderstyle.title}><img src={img1}/>系统关系</span>}>
        <Menu.Item key="3" className={siderstyle.menuitem}><Link to="/owner"/>个人中心</Menu.Item>
           <Menu.Item key="4" className={siderstyle.menuitem}><Link to="/setting"/>系统设置</Menu.Item>
      </MenuItemGroup>
    </Menu>
  </div>
    );
  }
}

MMenu.contextTypes={
  router: React.PropTypes.object.isRequired
}


function mapStateToProps({ menuandcrumb,login}) {
  return {menuandcrumb,login};
}

export default connect(mapStateToProps)( MMenu);

menumodel

export default {
  namespace: 'menumodel',
  state: {
    menu:"1",
  },
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {

    let menu="1";
    if(pathname.startsWith('/user')) {
     menu="1";
    }else if(pathname.startsWith('/role')) {
       menu="2";
   }else if(pathname.startsWith('/owner')) {
      menu="3";
    }else if(pathname.startsWith('/setting')) {
      menu="4";
    }else {
      menu="1";
    }
    console.log(pathname)
    console.log(menu)
    console.log(crumb)
    dispatch({
      type: 'change',
      payload: {
        menu:menu,
        crumb:crumb
      }
    });
  })
},
  },
  reducers: {
    change(state, { payload }) {
      return { ...state,...payload };
    },
  },
};

声明

以上内容均来源于实用中的网络和官方查找，若有批漏或侵权请告知。

忘掉失败，不过要牢记失败中的教训。