延迟加载时，函数作为React子函数无效

Question

我有一个react应用程序，在Auth0保护的路由上完成授权后，我会延迟加载组件。

需要明确的是，它似乎可以很好地加载ParticipantComponent并显示其内部。所以这并不重要，但我确实想避免这个错误带来任何不可预见的后果。

错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 
Suspense  
Suspense 
index.js:1
e index.js:1
overrideMethod react_devtools_backend.js:2560
React 13
unstable_runWithPriority scheduler.development.js:468
React 4
unstable_runWithPriority scheduler.development.js:468
React 3
workLoop scheduler.development.js:417
flushWork scheduler.development.js:390
performWorkUntilDeadline scheduler.development.js:157
(Async: EventHandlerNonNull)
js scheduler.development.js:180
js scheduler.development.js:645
Webpack 21

唯一能让这个错误消失的是，如果我根本不懒惰地加载任何组件。我尝试过在树中上下移动Suspense，以及延迟加载ParticipantDash而不是ParticipantComponent。只有当我在应用程序中的任何地方都没有懒惰加载时，错误才会消失。我还尝试使用Route来代替ProtectedRoute，但问题仍然存在。

Index.js:

ReactDOM.render(
<Suspense fallback={Loading}>
<Router basename="/app">
<Auth0ProviderWithHistory>
<App /> 
</Auth0ProviderWithHistory>
</Router>
</Suspense>,
document.getElementById('root')

App.js:

import ParticipantDash from "./views/participantdash";
export default function App() {
const {isLoading, isAuthenticated, logout} = useAuth0();
const history = useHistory();
useEffect(() => {
if(!isAuthenticated){
history.push("/login");
} else {
history.push("/home");
}
});
if(isLoading){
return <Loading/>
} else {  
return(
<Fragment>
<ProtectedRoute path="/home" component={ParticipantDash}/>
<Route path="/login" component={Splash}/>
</Fragment>
)
}
}

protected-routes.js:

const ProtectedRoute = ({ component, ...args }) => {
return(
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => <Loading />,
})}
{...args}
/>
)
};

participantdash.js:

const ParticipantComponent = React.lazy(() => import("../components/participantcomponent"));
const ParticipantDash = () => {
return (
<Fragment>
<ParticipantComponent/>
</Fragment>
)
};

participantcomponent.js:

const ParticipantComponent = () => {
return (
<div> ParticipantComponent </div>
)
}

Answer 1

我猜Loading是一个react组件。Suspense组件的fallback道具必须是组件。

您需要将<Loading/>作为回退传递，而不是仅传递Loading。

ReactDOM.render(
<Suspense fallback={<Loading/>}>
<Router basename="/app">
<Auth0ProviderWithHistory>
<App /> 
</Auth0ProviderWithHistory>
</Router>
</Suspense>,
document.getElementById('root')
)