使用umi框架+antd,做了布局切换功能。通过读取不同的pathname,进行布局切换。只有在路径为 “/” 的时候,函数能读取到,但换了别的路径,函数就读不出路径了
切换页面相关代码:如果path为ADD_USER,就使用Welcome模板,否则就使用General模板
const BasicLayout: React.FC = (props: any) => {
const { location } = props;
const getLayout = () => {
let _pathName: string = location.pathname;
console.log(_pathName);
switch (_pathName) {
case ADD_USER:
return <Welcome>{props.children}</Welcome>;
default:
return <GeneralLayout>{props.chilren}</GeneralLayout>;
}
};
return <>{getLayout()}</>;
};
编写path代码
const config: IConfig = {
treeShaking: true,
routes: [
{
exact: true,
path: '/',
component: '../layouts/index',
routes: [{ path: '/', component: '../pages/index' }],
},
{
path: '/add',
component: '../pages/add/index',
routes: [{ path: '/add', component: '../pages/index' }],
},
{
path: '/users',
component: '../pages/users/index',
routes: [{ path: '/', component: '../pages/index' }],
},
],
index中的函数能顺利读取pathname