所以这有效:
import Page from 'components/Page';
...
render() {
return (
<Route render={props => <Page {...props}/>}/>
);
}
但这并没有:
import React, { lazy } from 'react';
const Cmp = lazy(() => import('components/Page'));
...
render() {
return (
<Route render={props => <Cmp {...props}/>}/>
);
}
反应16.8.6
反应路由器 5.0.0
我明白了:
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
谁能看出我在这里做了什么蠢事吗?
参考关于代码分割的 React 文档 https://reactjs.org/docs/code-splitting.html#route-based-code-splitting,建议使用Suspense
具有定义的fallback
因此,当组件未加载时,您可以渲染一些东西来代替组件。
// 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>
);
悬念应该是父母的<Route>
使用的元素lazy
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)