import React, { Component, Fragment } from "react";

// 路由的引入

import { BrowserRouter, Route } from "react-router-dom";

import ReactDOM from "react-dom";

import Appheader from "./components/header/";

import { Layout } from "antd";

import List from "./containers/List";

import "antd/dist/antd.css";

import "./style.css";

import Detail from "./containers/Detail/detail";

// 导入组件ant.design内的栏目组件

const { Header, Footer, Content } = Layout;

ReactDOM.render(

  <React.StrictMode>

    {/* minwidth设置网页缩小后，页面结构不会被破坏 */}

    <Layout style={{ minWidth: 1300 }}>

      <Header className="header">

        {/* 导入的组件像div形式写 */}

        <Appheader />

      </Header>

      <Content className="content">

        <BrowserRouter>

          <Fragment>

            <Route path="/" component={List}></Route>

            <Route path = "/detail" component = {Detail}></Route>

          </Fragment>

        </BrowserRouter>

      </Content>

      <Footer className="footer">Footer</Footer>

    </Layout>

  </React.StrictMode>,

  document.getElementById("root")

);

import React,{Component, component} from "react"

class Detail extends Component{

    render(){

        return <div>Detail</div>

    }

}

export default Detail