docusaurus客户端渲然处理

说明

如果是客户端处理的代码要使用react 的lazy组件进行懒加载

import React, { lazy, Suspense } from 'react';
import Layout from '@theme/Layout';

import BrowserOnly from '@docusaurus/BrowserOnly';
//  import WhiteBoard from '../components/WhiteBoard'
 
export default function Whiteboard() {
  return (
 
   <Layout title="白板绘图" description="白板绘图"  >
           <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: 'calc(100vh - var(    --ifm-navbar-height))',
          fontSize: '20px',
        }}>

 

<BrowserOnly fallback={<div>正在加载....</div>}>
{() => {
          const WhiteBoard = lazy(
            () =>
         
              import('../components/WhiteBoard') ,
          );
          return (
            <Suspense fallback={<div>正在加载....</div>}>
              <WhiteBoard />
            </Suspense>
          );
        }}
    </BrowserOnly>
        </div>

    </Layout>
  
    
  );
}