реагировать роутер ленивый компонент - PullRequest
Новая
       17

реагировать роутер ленивый компонент

3 голосов
/ 22 мая 2019

Так что это работает: 

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 React Router 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

Кто-нибудь может увидеть, какую глупость я здесь делаю?

1 Ответ

4 голосов
/ 22 мая 2019

При ссылке на 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>
);

Suspense должен быть родительским для элементов <Route>, которые используют lazy

...