react 路由配置

1. 安装react-router-dom

2. 在app.js中导入

mport { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

3. 使用懒加载

import React, {lazy,Suspense} from 'react';

const Test = lazy(()=>import('./modules/Test'))
const Home = lazy(()=>import('./modules/Home'))

4. 配置路由

<Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Test" element={<Test />} />
      </Routes>
    </Suspense>
  </Router>

总结：Suspense 是配合懒加载lazy使用的，fallback为模块未加载出来时的页面。