JUI

路由配置最佳实践

路由是组织起一个复杂应用的关键骨架，复杂应用由许多页面组件和功能组件组成，JUI使用组件化独立分治的架构模式，页面组件由若干功能组件或者子页面组件组成，页面组件和路由的结合实现界面的跳转。

组件路由的基本结构

父组件
├── pages
│   ├── page1 #页面组件1
│   │   └── index.js
│   └── page2 #页面组件2
│       └── index.js 
├── index.js #父组件入口
└── routes.js #父组件 路由配置

组件路由的配置

1、建立路由配置文件

// 父组件 routes.js
import Loadable from '@/components/loadable' //懒加载组件

const page1 = Loadable(() => import('./pages/page1')) //子 页面组件1
const page2 = Loadable(() => import('./pages/page2')) //子 页面组件2

export default [
  { path: '/demo/page1', component: page1 },
  { path: '/demo/page2', component: page2 }
]

参数：

  • path 可以是 path-to-regexp 能够理解的任何有效的 URL 路径。
  • component 只有当位置匹配时才会渲染的 React 组件。
  • exact 如果为 true，则只有在 path 完全匹配 location.pathname 时才匹配。

2、在组件入口渲染路由

// 父组件入口 index.js
import React, { Component, Fragment } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom';
import routes from './routes' //引入路由配置的 routes.js 文件

export default class DemoComponent extends Component {
  render() {
    return (
      <Fragment>
        <Switch>
          {routes.map((route, idx) => {
            return route.component ? (
              <Route
                key={idx}
                path={route.path}
                exact={route.exact}
                name={route.name}
                render={props => (
                  <route.component {...props} />
                )} />
            ) : (null);
          })}
        </Switch>
      </Fragment>
    )
  }
}

render 属性接收所有相同的 route props 的 component 渲染属性。

← 状态管理最佳实践 →