【React】Ant Design报错

在react中使用ant design引入组件的时候，样式已经正常，但控制台中还是出现了报错

出现这种报错的原因是：引入的const代码位置不正确

错误代码如下：

import React from 'react'

import { Layout} from 'antd';
//在这里引入就会出现上面的报错
const {Content } = Layout;


import Ll from '../components/leftlist.jsx'
import Rt from '../components/righttop.jsx'

import { Route, Switch, Redirect } from 'react-router-dom'

import Home from './home/home'
import No from './home/no'

import Rulelist from './home/rule/list'
import List from './home/rule/list'

import Userlist from './home/user/list'

// 引用顺序有要求 方最下面 不然会报错


export default function NewSandBox() {
    return (
        <Layout>

            <Ll></Ll>

            <Layout className="site-layout">
            <Rt></Rt>
            {/* 首页右侧下半部分二级路由设置 */}
            <Content
                className="site-layout-background"
                style={{
                    margin: '24px 16px',
                    padding: 24,
                    minHeight: 280,
                }}
            >
                <Switch>
                    <Route path="/home" component={Home}></Route>
                    <Route path="/rule/list" component={List}></Route>
                    <Route path="/rule/rulelist" component={Rulelist}></Route>
                    <Route path="/user/userlist" component={Userlist}></Route>
                    <Redirect from="/" to="/home" />
                    <Route component={No} />
                </Switch>
            </Content>
            </Layout>
            </Layout>
    )
}

 正确的引入顺序应该为：

import React from 'react'

import { Layout} from 'antd';

import Ll from '../components/leftlist.jsx'
import Rt from '../components/righttop.jsx'

import { Route, Switch, Redirect } from 'react-router-dom'

import Home from './home/home'
import No from './home/no'

import Rulelist from './home/rule/list'
import List from './home/rule/list'

import Userlist from './home/user/list'

// 引用顺序有要求 方最下面 不然会报错
const {Content } = Layout;

export default function NewSandBox() {
    return (
        <Layout>

            <Ll></Ll>

            <Layout className="site-layout">
            <Rt></Rt>
            {/* 首页右侧下半部分二级路由设置 */}
            <Content
                className="site-layout-background"
                style={{
                    margin: '24px 16px',
                    padding: 24,
                    minHeight: 280,
                }}
            >
            </Content>
            </Layout>
            </Layout>
    )
}

更改后控制台再无报错