React结合ReactRouter如何设置路由跳转时展示的默认加载占位页面？

前置改造：组件懒加载 #

你当前的代码中所有页面组件都是首屏全量导入，跳转时不存在资源加载等待间隙，自然无法触发加载态。首先需要把所有页面组件改为懒加载模式，将不同路由的代码拆分为独立的chunk，仅当用户访问对应路由时才加载资源：

// 把原有普通导入改为React.lazy懒加载，示例如下，替换为你实际的组件路径
const We = React.lazy(() => import('./pages/We'))
const WeMob = React.lazy(() => import('./pages/WeMob'))
const Our = React.lazy(() => import('./pages/Our'))
const OurMob = React.lazy(() => import('./pages/OurMob'))
// 剩余MZsPopular、WritePost、Terms等所有页面组件全部按照上述格式修改

配置全局加载占位 #

使用React内置的Suspense组件包裹整个路由结构，指定fallback属性为你的加载占位组件，路由跳转等待资源加载时会自动展示该占位内容：

// 极简加载占位组件，可直接复用
function Loading() {
  return (
    <div style={{
      width: '100vw',
      height: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }}>
      <div style={{
        width: '40px',
        height: '40px',
        border: '4px solid #f3f3f3',
        borderTop: '4px solid #1677ff',
        borderRadius: '50%',
        animation: 'spin 1s linear infinite'
      }} />
      <style>{`
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  )
}

function App() {
  return (
      <BrowserRouter>
        <React.Suspense fallback={<Loading />}>
          <Switch>
            {/* 原有所有Route代码保持不变 */}
            <Route exact path="/politics-we">
              <>
                <Global>{device === "mobile" ? <WeMob /> : <We />}</Global>
              </>
            </Route>
            <Route exact path="/politics-our">
              <>
                <Global>{device === "mobile" ? <OurMob /> : <Our />}</Global>
              </>
            </Route>
            <Route path="/mzs-popular">
              <>
                <Global>
                  {device === "mobile" ? <MZsPopularMob /> : <MZsPopular />}
                </Global>
              </>
            </Route>
            <Route exact path="/meme/write">
              <>
                <Global>
                  {device === "mobile" ? (
                    <WritePostMob group="memecreate" title="Meme" />
                  ) : (
                    <WritePost group="memecreate" title="Meme" />
                  )}
                </Global>
              </>
            </Route>
            <Route exact path="/mzs/write">
              <>
                <Global>
                  {device === "mobile" ? (
                    <WritePostMob group="mzsgeneralcreate" title="MZs" />
                  ) : (
                    <WritePost group="mzsgeneralcreate" title="MZs" />
                  )}
                </Global>
              </>
            </Route>
            <Route path="/terms">
              <>
                <Global>
                  <Terms />
                </Global>
              </>
            </Route>
            <Route path="/info">
              <>
                <Global>
                  <Info />
                </Global>
              </>
            </Route>
            <Route path="/user-page">
              <>
                <Global>
                  <UserPage />
                </Global>
              </>
            </Route>
            <Route path="/notice">
              <>
                <Global>
                  <Notice />
                </Global>
              </>
            </Route>
            <Route path="/policy">
              <>
                <Global>
                  <Policy />
                </Global>
              </>
            </Route>
            <Route exact path="/">
              <>
                <Global>
                  {device === "mobile" ? <BeforeSignInMob /> : <SignIn />}
                </Global>
              </>
            </Route>
          </Switch>
        </React.Suspense>
      </BrowserRouter>
  );
}

加载占位组件优化要点（保证极速加载） #

• 所有样式直接写内联CSS或者内嵌style标签，不要引入外部CSS文件、图片、字体等资源，避免额外网络请求
• 动效用原生CSS实现，不要使用GIF、第三方动效库，代码量控制在1KB以内
• 加载组件不要嵌套其他自定义组件，保证其代码被打包进首屏主chunk，不会出现加载组件本身还要等待加载的问题
• 如果需要优化页面刷新时的白屏问题，可以直接把Loading组件的静态HTML和CSS写在public/index.html的root节点内部，React加载完成后会自动替换该内容

内容的提问来源于stack exchange，提问作者ReginaTheMean