为未来的读者解答问题
在查看了大量资源和其他教程后，我找到了解决问题的方法。
简而言之，我决定在 Route 标签调用的每个组件中延迟加载，而不是在“App.js”中的 Routes 处延迟加载组件（如上面问题中的代码所示）。这是有效的，因为这些路由实际上会根据用户的屏幕宽度加载非常特定的页面的组件（请参阅下面的示例代码以获取我的注册页面）：
延迟加载之前的 SignupComponent.js
import * as React from 'react';
import { useState, useEffect } from 'react';
import { connect } from 'react-redux'; //The library that holds react and redux together.
import { Redirect } from 'react-router-dom'; //Used to redirect logged out users to a different page.
import '../authorization.css'
//Page Transition imports
import { PageTransition } from '../../layout/PageTransition';
import {motion} from 'framer-motion';
import SignupFullscreen from './SignupFullscreen';
import SignupSmallFullscreen from './SignupSmallFullscreen';
import SignupTablet from './SignupTablet';
import SignupSmallTablet from './SignupSmallTablet';
import SignupMobile from './SignupMobile';
const SignupComponent = (props) => {
const { authToken, auth } = props
//Using the useWindowSize function to determine width of screen.
let [width] = useWindowSize();
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//FULLSCREEN.
if(width >= 1425){
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupFullscreen/>
</motion.div>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//SMALL FULLSCREEN.
else if( (width>1100)&&(width<=1425) ){
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupSmallFullscreen/>
</motion.div>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//FULL TABLET SCREEN.
else if( (width>650)&&(width<=1100) ){
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupTablet/>
</motion.div>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//HALF TABLET SCREEN.
else if( (width>425)&&(width<=650) ){
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupSmallTablet/>
</motion.div>
);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//MOBILE SCREEN.
else if( width<=425 ){
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupMobile/>
</motion.div>
);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//DEFAULT IS FULLSCREEN
else {
return(
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupFullscreen/>
</motion.div>
);
}
}
const mapStateToProps = (state) => {
return {
authToken: state.auth.authToken,
authError: state.auth.authError,
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
//Used to determine width of the screen.
function useWindowSize() {
const [size, setSize] = useState([window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerWidth]);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
}
}, []);
return size;
}
export default connect(mapStateToProps, mapDispatchToProps)(SignupComponent)
要引入延迟加载，您只需将这些组件中的每一个包装在 <React.Suspense> 标记中，如下面的代码所示。
添加延迟加载后的 SignupComponent.js
import * as React from 'react';
import { useState, useEffect } from 'react';
import { connect } from 'react-redux'; //The library that holds react and redux together.
import { Redirect } from 'react-router-dom'; //Used to redirect logged out users to a different page.
import '../authorization.css'
//Page Transition imports
import { PageTransition } from '../../layout/PageTransition';
import {motion} from 'framer-motion';
const SignupComponent = (props) => {
const SignupFullscreen = React.lazy(() => import('./SignupFullscreen'));
const SignupSmallFullscreen = React.lazy(() => import('./SignupSmallFullscreen'));
const SignupTablet = React.lazy(() => import('./SignupTablet'));
const SignupSmallTablet = React.lazy(() => import('./SignupSmallTablet'));
const SignupMobile = React.lazy(() => import('./SignupMobile'));
const { authToken, auth } = props
//Using the useWindowSize function to determine width of screen.
let [width] = useWindowSize();
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//FULLSCREEN.
if(width >= 1425){
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupFullscreen/>
</motion.div>
</React.Suspense>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//SMALL FULLSCREEN.
else if( (width>1100)&&(width<=1425) ){
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupSmallFullscreen/>
</motion.div>
</React.Suspense>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//FULL TABLET SCREEN.
else if( (width>650)&&(width<=1100) ){
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupTablet/>
</motion.div>
</React.Suspense>
);
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//HALF TABLET SCREEN.
else if( (width>425)&&(width<=650) ){
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupSmallTablet/>
</motion.div>
</React.Suspense>
);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//MOBILE SCREEN.
else if( width<=425 ){
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupMobile/>
</motion.div>
</React.Suspense>
);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//DEFAULT IS FULLSCREEN
else {
return(
<React.Suspense fallback={<p>Loading list...</p>}>
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show'>
<SignupFullscreen/>
</motion.div>
</React.Suspense>
);
}
}
const mapStateToProps = (state) => {
return {
authToken: state.auth.authToken,
authError: state.auth.authError,
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
//Used to determine width of the screen.
function useWindowSize() {
const [size, setSize] = useState([window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerWidth]);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
}
}, []);
return size;
}
export default connect(mapStateToProps, mapDispatchToProps)(SignupComponent)