pathname读取失败:在函数中不能读取,却能在浏览器控制台打印

pathname读取失败:在函数中不能读取,却能在浏览器控制台打印

使用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' }],
    },
  ],
运行结果及报错内容
  1. 路径为“/add”,index中的函数不能读取pathname

img

  1. 路径为默认 "/" 时,可以顺利读取

img

我想要达到的结果

index中的函数能顺利读取pathname