Ленивый компонент React Router не работает
Итак, это работает:
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
Кто-нибудь может увидеть, какую глупость я здесь делаю?
Ответьте, что @JohnRuddell - вам нужно определить fallback - если вы завернете компонент в <Suspense>, но не определите fallback, он потерпит неудачу так же.
Ответы 2
Ссылаясь на React Docs по разделению кода, рекомендуется использовать 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
Для протокола: я знал, что приостановка с откатом была рекомендацией, я никогда не знал, что она выдаст ошибку (может быть, только в режиме разработки?), Если вы ее не предоставите.
И под «это» выше я имел в виду, что это приведет к ошибкам, если вы предоставите компонент Suspense, но не опору fallback.
Я обновил версию реакции, и эта ошибка начала появляться, потому что я забыл также обновить версию пакета react-dom, как только я это сделал, все заработало нормально.
Разве вам не нужно использовать саспенс с запасным вариантом? Я предполагаю, что компонент Cmp еще не создан, поэтому у вас есть объект, распределенный по отложенному? Можете ли вы отладить, что такое Cmp при рендеринге/сбое?