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

Mr Ke

2020-05-27 ff30a564164c47b4acc51c9c2022b1faca166cc3

 src/index.js

@@ -3,9 +3,6 @@
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';
import { ConfigProvider } from 'antd';
@@ -17,82 +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 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';

import DocumentEdit from './pages/document/DocumentEdit'; //新建文档
import DocumentDetail from './pages/document/DocumentDetail'; //文档详情
import BrowseLog from './pages/logManage/browseLog'; //浏览日志
import OperLog from './pages/logManage/operLog'; //操作日志
import Rawler from './pages/logManage/Rawler'; //爬虫词条管理
import Information from './pages/personal/information'; //个人信息
// oa路由映射
import OaRouteDom from './routeDom/oaRouteDom';
import UserRouteDom from './routeDom/userRouteDom';

// 基础平台
import UserManage from './components/page/basicConfig/UserManage';//用户管理
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="/baseManage/user" component={UserManage} />
class RouteDom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      context: {
        role: 'oa',
        roleMenuList: [],
        setContext: this.setContext,
      },
    };
  }

              {/* 新建文档 */}
              <Route path="/document/create/:id?" component={DocumentEdit} />
              {/* 文档、通知详情 */}
              <Route path="/document/detail/:id" component={DocumentDetail} />
  componentDidMount() {
    let pathname = history.location.pathname;
    let menusListByRole = window.localStorage.getItem('menusListByRole')
      ? JSON.parse(window.localStorage.getItem('menusListByRole'))
      : [];

              {/* 全部通知 */}
              <Route
                path="/index/workbench/announcement"
                component={Announcement}
              />
              {/* 规章制度 */}
              <Route path="/index/rules" component={System} />
              {/* 首页 */}
              <Route path="/index" component={Workbench} />
    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;
      }
    }, []);

              {/* 浏览日志 */}
              <Route path="/logManage/browseLog" component={BrowseLog} />
              {/* 操作日志 */}
              <Route path="/logManage/operLog" component={OperLog} />
              {/* 爬虫词条管理 */}
              <Route path="/logManage/rawler" component={Rawler} />
              {/* 个人信息 */}
              <Route path="/personal/information" component={Information} />
    this.setState({
      context: {
        ...this.state.context,
        role,
      },
    });
  }

              {/* 登录页 */}
              <Route path="/login" component={Login} />
              <Route path="/" component={Workbench} />
  setContext = (data) => {
    console.log('data', data);
    this.setState({
      context: {
        ...this.state.context,
        ...data,
      }, //更新context
    });
  };

              {/* 路由的页面重定向 */}
              <Redirect to="/" component={Workbench} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  </ConfigProvider>,
  document.getElementById('root')
);
  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.