import * as React from 'react';
import {Route,Routes} from 'react-router-dom'
import  Navbar  from './components/Navbar';
import  {BrowserRouter} from 'react-router-dom'
// import { customizedRouter,buildRoutes } from './config';
import MxmRoute from './router/MxmRoute';
import Baas33 from './views/Baas33';
import Chain33 from './views/Chain33';
import About from './views/About';
import Cooperation from './views/Cooperation'
import { Details } from './views/Baas33/Dtails';
import {NewsDetails} from './views/News/NewsDetails'
import {Classes} from './views/Classes'
import {DocViewer} from './views/DocViewer'
// import News from './views/News';
const News = React.lazy(()=>import('./views/News'))
const Loading=()=>{
  return(
    <div>
      loading........
    </div>
  )
}


export function App () {
  return (
    <>
          <Navbar></Navbar>
          <Routes>
              <Route element={<MxmRoute meta={{name:'Bass33'}}> <Baas33></Baas33> </MxmRoute>} path='/'></Route>
              <Route element={<MxmRoute meta={{name:'Chain33'}}> <Chain33></Chain33> </MxmRoute>} path='/chain33'></Route>
              <Route element={<MxmRoute meta={{name:'关于我们'}}><About /></MxmRoute>} path='/about'></Route>
              <Route element={<MxmRoute meta={{name:'产品详情'}}> <Details /></MxmRoute>} path='details/:id'/>
              <Route  path='/news' element={
                <React.Suspense fallback={<Loading></Loading>}>
                    <MxmRoute meta={{name:'新闻动态'}}> <News></News> </MxmRoute> 
                </React.Suspense>
              }
              />
              <Route element={<MxmRoute meta={{name:'文档'}}><DocViewer /></MxmRoute>} path='/docs/:id'></Route>
              <Route element={<MxmRoute meta={{name:'新闻详情'}}><NewsDetails /></MxmRoute>} path='/news/:id'></Route>
              <Route element={<MxmRoute meta={{name:'公开课'}}><Classes /></MxmRoute>} path='/classes'></Route>
          </Routes>
    </>
  );
}
