刷新页面后加粗的活动菜单

Question

我有一个用 React + Redux 和 Antdesign 编写的应用程序。我的应用程序是一个仪表板应用程序。所以我使用了 Ant 设计中的布局https://ant.design/components/layout/

当我点击侧边菜单时，活动菜单变粗，这很好。但是我需要在刷新页面时，它会检查并检测路线和粗体相关菜单项。

我有一个有状态的侧边栏组件。在它内部，在 componentDidMount 中，我调用了一个函数，该函数将从 mapDispatchToProps 分派一个动作。减速器改变状态。但是在 HTML 代码中，在 defaultSelectedKeys 中，我无法设置活动菜单的数量。

Sidebar.js 组件：

import React from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux'
import { Switch, BrowserRouter, Route, Link } from 'react-router-dom';

// antd
import { Layout, Breadcrumb, Menu, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

// Helpers
import { Alert } from '../helpers/notifications';

// Components
import Home from '../components/Home';
// import Header from '../components/Header';
import NotFound from '../components/NotFound';
import PostsEditor from '../components/Posts/PostsEditor';

// Actions
import { setRouteActiveFlag } from '../actions/ui.action'

class Sidebar extends React.Component {

    componentDidMount () {
      const routes = {
        '/'       : 1,
        '/posts'  : 2,
        '/logout' : 3
      }

      this.props.detectActiveRoute(setRouteActiveFlag({
        routes:routes, 
        path:window.location.pathname
      }))
    }


    render() {

        const { selectedRoute } = this.props;
        console.log(selectedRoute);

        return (
            <div>
              <Layout>
                <Sider
                  style={{
                    overflow: 'auto',
                    height: '100vh',
                    position: 'fixed',
                    left: 0,
                  }} 
                  breakpoint="lg"
                  collapsedWidth="0"
                  onBreakpoint={broken => {
                    console.log(broken);
                  }}
                  onCollapse={(collapsed, type) => {
                    console.log(collapsed, type);
                  }}
                >
                  <div className="logo" >
                    Logo <br/><br/><br/>
                  </div>
                  <Menu theme="dark" mode="inline"  style={{ lineHeight: '64px' }} defaultSelectedKeys={[selectedRoute.toString() || '1']}>
                    <Menu.Item key="1">
                      <Link to="/" style={{ color:'#fff' }}>
                        <Icon type="user" />
                        <span className="nav-text">Home</span>
                      </Link>
                    </Menu.Item>
                    <Menu.Item key="2">
                      <Link to="/posts" style={{ color:'#fff' }}>
                        <Icon type="user" />
                        <span className="nav-text">Posts</span>
                      </Link>
                    </Menu.Item>
                    <Menu.Item key="3">
                      <a href="/logout" style={{ color:'#fff' }}>
                        <Icon type="user" />
                        <span className="nav-text">Logout</span>
                      </a>
                    </Menu.Item>
                  </Menu>
                </Sider>
                <Layout style={{ marginLeft: 200 }}>
                  <Content style={{ margin: '24px 16px 0', overflow: 'initial'}}>

                      <Breadcrumb style={{ margin: '0 0 20px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                      </Breadcrumb>

                      <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                        <Switch>
                            <Route path="/" exact component={Home} />
                            <Route path="/posts/:id?" component={PostsEditor} />
                            <Route component={NotFound}/>
                        </Switch>
                        <Alert stack={ { limit: 3 } } />
                      </div>

                  </Content>

                  <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
              </Layout>
            </div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
      state: state,
      props: ownProps,
      selectedRoute:state.ui.selectedRoute || 1
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
      detectActiveRoute: (obj) => dispatch(obj)
    }
}


export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Sidebar)

ui.action.js

export const setRouteActiveFlag = (payload = 'global') => ({
  type: actions.SET_ROUTE_ACTIVE_FLAG,
  payload
});

ui.reducer.js

import { handleActions } from 'redux-actions';
import Immutable from 'seamless-immutable';
import * as actions from '../consts/action-types';


const initialState = Immutable({
  requests: {},
  selectedRoute:{}
});


export default handleActions({
  [actions.SET_ROUTE_ACTIVE_FLAG]: (state, action) => {
    if (action.payload.routes && action.payload.path && action.payload.routes[ action.payload.path ]) {
        return state.set('selectedRoute', action.payload.routes[ action.payload.path ])
    }else{
        return state.set('selectedRoute', 1)
    }
  }
}, initialState);

请帮助我找到最佳和简单的做法。

Answer 1

无需使用redux，只需用于react-router获取当前路径名并将其传递给defaultSelectedKeys.

<Menu defaultSelectedKeys={[this.props.location.pathname]}>
  ...
  .....
</Menu>

看看这个答案，如果你不知道如何获取路径名