react-router+antD/ How to highlight a menu item when press back/forward button?

后端 未结 6 2232
[愿得一人]
[愿得一人] 2021-02-12 17:54

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 ha

6条回答
  •  南笙
    南笙 (楼主)
    2021-02-12 18:04

    I do something like this but it doesn't seem to be reactive. Like if I navigate to a new page through a button (not from the menu items), it will not update the active link until the page refreshes.

    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 (
        
            
                
              

    {appName}

    Home Signup Login
    ); }, }); export const App = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired, }, componentWillMount(){ if (Meteor.userId()) { browserHistory.push('/student/home') } }, render() { return (
    { this.props.children }
    ); } });

    EDIT:

    the below works pretty well. pass down the pathname from react-router and pop that as a prop into 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 (
        
            
                
              

    {appName}

    Home Signup Login
    ); }, }); export const App = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired, }, componentWillMount(){ if (Meteor.userId()) { browserHistory.push('/student/home') } }, render() { return (
    { this.props.children }
    ); } });

提交回复
热议问题