Компоненты после приостановки реакции не загружаются? - PullRequest
Новая
       69

Компоненты после приостановки реакции не загружаются?

0 голосов
/ 12 марта 2020

Мне пришлось разбить некоторые из моих маршрутов с помощью susse и response.lazy, чтобы убедиться, что мой пакет не был нелепым. Но после этого маршруты после моей первой подвески больше не работают?

В следующем примере маршруты для ссылок 1 - 6 работают правильно (без проблем, и они отображаются правильно). Но компоненты внутри Suspense и все последующие (внутри и снаружи) не загружаются должным образом. Вы go к этому маршруту и ​​ничего не загружается на странице. Даже компонент Spinner не загружается как запасной вариант. Я попытался удалить компонент счетчика как запасной вариант и просто выполнял загрузку ... и даже это не будет отображаться на странице.

Мои операторы импорта: 

import React, { Component } from 'react';
import { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Мой компонент Пример структуры импорта: 

import Comp1 from './components/Comp1';
import Comp2 from './components/Comp2';
import Comp3 from './components/Comp3';
import Comp4 from './components/Comp4';
import Comp5 from './components/Comp5';
import Comp6 from './components/Comp6';
import Comp9 from './components/Comp9';

const Comp7 = React.lazy(() => import('./components/Comp7'));
const Comp8 = React.lazy(() => import('./components/Comp8'));
const Comp10 = React.lazy(() => import('./components/Comp10'));

(Пример моего дерева маршрутов) 

<Route exact path="/link-1" component={ Comp1 } />
<Route exact path="/link-2" component={ Comp2 } />
<Route exact path="/link-3" component={ Comp3 } />
<Route exact path="/link-4" component={ Comp4 } />
<Route exact path="/link-5" component={ Comp5 } />
<Route exact path="/link-6" component={ Comp6 } />
<Suspense fallback={<Spinner /> }>
    <Route exact path="/link-7" component={ Comp7 } />
    <Route exact path="/link-8" component={ Comp8 } />
</Suspense>

<Route exact path="/link-9" component={ Comp9 } />

<Suspense fallback={<Spinner /> }>
    <Route exact path="/link-10" component={ Comp10 } />
</Suspense>

<Route exact path="/link-11" component={ Comp11 } />

1 Ответ

0 голосов
/ 13 марта 2020

Это было связано с моим React-Router. В документации и источниках, которые я просматривал, говорилось, что маршруты могут быть в обычном дереве маршрутов, что оказалось не так. Приостановка должна была быть за пределами Заявления о реакции-роутере. После переноса каждого маршрута за пределы оператора switch он работал правильно.

...