So this works:
import Page from 'components/Page';
...
render() {
return (
<Route render={props => <Page {...props}/>}/>
);
}
But this doesn't:
import React, { lazy } from 'react';
const Cmp = lazy(() => import('components/Page'));
...
render() {
return (
<Route render={props => <Cmp {...props}/>}/>
);
}
React 16.8.6 React Router 5.0.0
I get this:
The above error occurred in one of your React components:
in Unknown (at configured.route.js:41)
in Route (at configured.route.js:41)
in ConfiguredRoute (created by Context.Consumer)
...rest of stack trace
Can anyone see what stupid thing I am doing here?
Referencing the React Docs on code splitting, the recommendation is to use Suspense with a defined fallback so you have something to render in place of the components when they haven't loaded.
// Direct paste from https://reactjs.org/docs/code-splitting.html
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
Suspense should be a parent of the <Route> elements that use lazy
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加