修复初始状态导致的页面空白问题

Mr Ke

2020-05-27 ff30a564164c47b4acc51c9c2022b1faca166cc3

 src/index.js

@@ -1,9 +1,7 @@
/* eslint-disable */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import Menu from './pages/menu/menu';
import Header from './components/common/HeadView';

import * as serviceWorker from './serviceWorker';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
@@ -16,62 +14,113 @@
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 引进页面（pages）
import Index from './pages/Index';
import Login from './pages/login/login';
import JurisdictionPersonMgt from './pages/collect/jurisdictionPersonMgt'; //信息采集--辖区人口管理
import Workbench from './pages/index/workbench'; //首页--工作台
import System from './pages/index/System'; //首页--工作制度
import Announcement from './pages/index/Announcement'; //全部通知
// 公用结构组件
import Menu from './module/menu/menu';
import Header from './components/common/HeadView';
import Login from './module/login/login';

// oa路由映射
import OaRouteDom from './routeDom/oaRouteDom';
import UserRouteDom from './routeDom/userRouteDom';


import DocumentEdit from './pages/document/DocumentEdit'; //新建文档


export const Context = React.createContext();

const { Content } = Layout;
const history = createHashHistory();

ReactDOM.render(
  <ConfigProvider locale={zh_CN}>
    <Router history={history}>
      <Layout className="h-100">
        <Switch>
          <Route path="/login" component={null} />
          <Route component={Menu} />
        </Switch>
        <Layout>
          <Switch>
            <Route path="/login" component={null} />
            <Route component={Header} />
          </Switch>
          <Content>
            <Switch>
              {/* 新建文档 */}
              <Route path="/document/create" component={DocumentEdit} />
class RouteDom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      context: {
        role: 'oa',
        roleMenuList: [],
        setContext: this.setContext,
      },
    };
  }

              {/* 全部通知 */}
              <Route path="/index/workbench/announcement" component={Announcement} />
              {/* 规章制度 */}
              <Route path="/index/rules" component={System} />
              
              {/* 首页 */}
              <Route path="/index" component={Workbench} />
             
  componentDidMount() {
    let pathname = history.location.pathname;
    let menusListByRole = window.localStorage.getItem('menusListByRole')
      ? JSON.parse(window.localStorage.getItem('menusListByRole'))
      : [];

              <Route path="/login" component={Login} />
              <Route path="/" component={Workbench} />
              {/* 路由的页面重定向 */}
              <Redirect to="/" component={Workbench} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  </ConfigProvider>,
  document.getElementById('root')
);
    let role = Object.keys(menusListByRole).reduce((p, n) => {
      if (
        menusListByRole[n].menus
          .reduce((p, n) => {
            if (n.children) {
              return p.concat(n.children);
            } else {
              return p.concat(n);
            }
          }, [])
          .find(({ path }) => path == pathname)
      ) {
        return p.concat(n);
      } else {
        return p;
      }
    }, []);

    this.setState({
      context: {
        ...this.state.context,
        role,
      },
    });
  }

  setContext = (data) => {
    console.log('data', data);
    this.setState({
      context: {
        ...this.state.context,
        ...data,
      }, //更新context
    });
  };

  render() {
    let { context } = this.state;
    return (
      <ConfigProvider locale={zh_CN}>
        <Context.Provider value={context}>
          <Router history={history}>
            <Layout className="h-100">
              {/* 顶部-侧边布局-通栏 */}
              {/* 顶部 */}
              <Switch>
                <Route path="/login" component={null} />
                <Route
                  component={() => (
                    <Header setContext={this.setContext} props={this.props} />
                  )}
                />
              </Switch>
              <Layout>
                <Switch>
                  <Route path="/login" component={null} />
                  <Route component={Menu} />
                </Switch>
                <Layout>
                  <Content>
                    {context.role == 'oa' && <OaRouteDom />}
                    {context.role == 'user' && <UserRouteDom />}
                    <Route path="/login" component={Login} />
                  </Content>
                </Layout>
              </Layout>
            </Layout>
          </Router>
        </Context.Provider>
      </ConfigProvider>
    );
  }
}

ReactDOM.render(<RouteDom></RouteDom>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.