react router6使用React.lazy()函数时报错

react router6使用React.lazy()懒加载时报错

配置路由

	<NavLink to="/login" >登录</NavLink>
	<NavLink to="/home" >首页</NavLink>
	<Routes>
	    <Route path='/' element={<Navigate to='/home' replace={false} />}></Route>
	    <Route path='/login' element={<Login />}></Route>
	    <Route path='/home' element={<Home />}></Route>
  </Routes>

点击路由调转时报错

解决方案

在路由的最外侧添加一个React.Suspend 标签，当路由加载过程中可以显示一个等待页面

<React.Suspense fallback={<Loading />}>
      <Routes>
        <Route path='/' element={<Navigate to='/home' />}></Route>
        <Route path='/login' element={<Login />}></Route>
        <Route path='/home' element={<Home />}></Route>
      </Routes>
    </React.Suspense>

https://blog.csdn.net/qq_31754591/article/details/121136628