Ant Design Pro系列快速入门(六)-- 使用新的布局
2019-10-29 本文已影响0人
子木话
定义一个新的布局
- loayout文件夹定义布局的js文件和less样式文件
- /common/router.js中定义使用新布局的路径
'/data': {
component: dynamicWrapper(app, [], () => import('../layouts/DataCenterLayout')),
}
- /router.js路由转发时使用加载该布局
const DataLayout = routerData['/data'].component;
return (
<LocaleProvider locale={zhCN}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/user" component={UserLayout} />
<AuthorizedRoute
path="/sys"
render={props => <ModuleLayout {...props} />}
authority={['admin', 'user']}
redirectPath={getQueryPath('/user/login', {
redirect: window.location.href,
})}
/>
<AuthorizedRoute
path="/data"
render={props => <DataLayout {...props} />}
authority={['admin', 'user']}
redirectPath={getQueryPath('/user/login', {
redirect: window.location.href,
})}
/>
<AuthorizedRoute
path="/"
render={props => <BasicLayout {...props} />}
authority={['admin', 'user']}
redirectPath={getQueryPath('/user/login', {
redirect: window.location.href,
})}
/>
</Switch>
</ConnectedRouter>
</LocaleProvider>