我们开发的泥腿农产品溯源平台，分为数据库、后台、前端（网站官网和官网管理后台）等。数据库使用mysql，后台使用springboot，前端使用react阿里系的飞冰系统。飞冰系统真的很强大，但是目前关于飞冰的使用资料等极少，最主要还是要好好研读其官方文档。

先看最后的效果图

1.http://localhost:4444/#/home这是官网首页

image.png

2.http://localhost:4444/#/login这是登陆页

image.png

3.http://localhost:4444/#/enterprise/all这是后台管理页面

image.png

分析实现原理。

本位重点阐述通过配置router实现网站官网和官网后台的不同布局。飞冰默认状态下只有一个入口，对于该功能怎么实现呢？
本文实现主要参考飞冰官网的“路由设计”：https://alibaba.github.io/ice/docs/pro/router
在模板中，路由与菜单一样也是按照一定的约定进行配置，用来描述路由的结构关系。路由主要分为 路由配置 和 路由生成 两部分：
1.路由配置：在 src/routerConfig.js 中配置路由
2.路由生成：在 src/router.js 中生成路由
这样设计的目的主要是分离路由配置信息和路由生成部分，配置和生成进行解耦，有利于在新增路由时只需要关注路由配置，除了顶层路由，其余路由列表都是自动生成，其中关键的就是中心化配置文件 src/routerConfig.js.

具体实现

1.routerConfig.js的主要内容

const routerConfig = [
  {
    path: '/login',
    layout: BasicLayout,
    component: Login,
  },
  {
    path: '/register',
    layout: BasicLayout,
    component: Registeruser,
  },
  {
    path: '/officalPage',
    layout: BasicLayout,
    component: OfficalPage,
  },
  {
    path: '/TraceInfoPage',
    layout: BasicLayout,
    component: TraceInfoPage,
  },
];

2.router.jsx的主要内容

/**
 * 定义应用路由
 */
import {Switch, Route} from 'react-router-dom';
import React from 'react';
import BasicLayout from './layouts/BasicLayout';
import OfficalPage from '../src/pages/OfficalPage';
import Login from '../src/pages/Login';
import Registeruser from '../src/pages/Registeruser';
import TraceInfoPage from '../src/pages/TraceInfoPage';

// 按照 Layout 归类分组可以按照如下方式组织路由
const router = () => {
    return (
        <Switch>
            <Route path="/home" component={OfficalPage}/>
            <Route path="/login" component={Login}/>
            <Route path="/register" component={Registeruser}/>
            <Route path="/TraceInfoPage" component={TraceInfoPage}/>
            <Route path="/" component={BasicLayout}/>
        </Switch>
    );
};

export default router;

3.最后一步就是layouts下的MainRoutes.jsx

import React, { Component } from 'react';
import { Redirect, Switch, Route } from 'react-router-dom';

import NotFound from '../../components/NotFound';
import { asideMenuConfig } from '../../menuConfig';
import { routerData } from '../../routerConfig';
import { UserLogin } from '../../pages/Login/components/UserLogin/UserLogin';

class MainRoutes extends Component {
  static displayName = 'MainRoutes';

  /**
   * 根据菜单取得重定向地址.
   */
  getRedirectData = () => {
    const redirectData = [];
    const getRedirect = (item) => {
      if (item && item.children) {
        if (item.children[0] && item.children[0].path) {
          redirectData.push({
            from: `${item.path}`,
            to: `${item.children[0].path}`,
          });
          item.children.forEach((children) => {
            getRedirect(children);
          });
        }
      }
    };

    asideMenuConfig.forEach(getRedirect);

    return redirectData;
  };

  /**
   * 渲染路由组件
   */
  renderNormalRoute = (item, index) => {
    return item.component ? (
      <Route
        key={index}
        path={item.path}
        component={item.component}
        exact={item.exact}
      />
    ) : null;
  };

  render() {
    const redirectData = this.getRedirectData();
    return (
      <Switch>
        {/* 渲染权限路由表 */}

        {routerData.map(this.renderNormalRoute)}

        {/* 路由重定向，嵌套路由默认重定向到当前菜单的第一个路由 */}
        {redirectData.map((item, index) => {
          return <Redirect key={index} exact from={item.from} to={item.to} />;
        })}

          {/* 首页默认重定向到 /login */}
          **<Redirect exact from="/" to="/home" />**//这是重点，重定向到officePage.


        {/* 未匹配到的路由重定向到 404 */}
        <Route component={NotFound} />
      </Switch>
    );
  }
}

export default MainRoutes;

这样就实现了不同的路由，其页面布局方式不同。

BY CronaldoYang
2018.12.17