@hi-ui/transrouter-webpack-plugin

使用

npm i @hi-ui/transrouter-webpack-plugin --save
// or
yarn add @hi-ui/transrouter-webpack-plugin

webpack.config.js

const transRouterPlugin = require('@hi-ui/transRouter-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    transRouterPlugin({
      rootpath:'src/views', //页面放置根路径
      routeConfigfile:'src/routes/index.map.json', // 路由列表
      noFoundpage:`@hi-ui/classic-theme/es/components/404/index.js`  //需要配置的404页面
    })
  ]
}

src/routes/index.map.json

{
  "router":[
    { "name": "首页", "path": "/home"},
    {
      "name": "新增Hook示例",
      "children": [{
        "name": "表格展示",
        "path": "/demo/table"
      }, {
        "name": "Hook Example",
        "children": [{
          "name": "useState",
          "path": "/demo/hook/useState"
        }, 
        {
          "name": "useEffect",
          "path": "/demo/hook/useEffect"
        }
      ]
      }]
    },
    {
      "name": "其他",
      "children": [
        { "name": "关于", "path": "/about"},
      ] 
    },
    {
      "name": "异常404",
      "path": "/test404"
    }
  ]
}

src/App.jsx

import privateRoute from '@hi-ui/transRouter-webpack-plugin/utils/privateRoute.js'

class App extends React.Component {
  render() {
    return <Theme routes={privateRoute()} logo={logoConfig} login={loginConfig} type="classic" />
  }
}

export default App

示例

基于@hiui/calssic-theme进行路由配置

import React, { Component } from 'react'
import { Theme } from '@hi-ui/classic-theme'
import { Link } from 'react-router-dom'
import { Input, Icon } from '@hi-ui/hiui'

const Mi = () => <div>小米手机</div>
const RedMi = () => <div>红米手机</div>
const BlackShark = () => <div>黑鲨手机</div>
const TV = () => <div>小米电视</div>
const SoundBox = () => (
  <div>
    小米音响<Link to='/robot-detail/1'>去详情页</Link>
  </div>
)
const Robot = () => <div>米家扫地机器人</div>
const RobotDetail = () => <div>米家扫地机器人详情页</div>

const logoConfig = {
  logoUrl: 'https://xiaomi.github.io/hiui/static/img/logo.png?241e0618fe55d933c280e38954edea05',
  name: 'HIUI Theme',
  url: 'https://xiaomi.github.io/hiui/#/'
}

const loginConfig = {
  name: 'Mi Guest',
  icon: 'user',
  children: [
    <div key='1' style={{ textAlign: 'center', margin: 4, width: '100px' }}>
      <a href='#info'>个人信息</a>
    </div>,
    <div key='2' style={{ textAlign: 'center', margin: 4, width: 100 }}>
      <a href='#logout'>注销</a>
    </div>
  ]
}
const toolbar = [<Input key='1' />, <Icon key='2' name='prompt' />]
const routeConfig = privateRoute(['/home']) //传入具有权限的路由或者不传；不传入默认具备所有权限
class App extends Component {
  render() {
    return <Theme routes={routeConfig} logo={logoConfig} login={loginConfig} toolbar={toolbar} />
  }
}

export default App