Загружать CSS компонента, только если он отображается

Question

В проекте у меня есть разные компоненты с различным css импортом, и в приложении я использую реагирующий маршрутизатор для определения путей. Когда я обращаюсь к / anycomponent, я имею их импорт в голове, но все css других компонентов также go там. Есть ли способ импортировать css компонента только тогда, когда он отображается?

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import component1 from './pages/component1';
import component2 from './pages/component2';

export default function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={component1} />
                <Route path="/component2" component={component2} />
            </Switch>
        </BrowserRouter>
    );
}

Answer 1

Попробуйте лениво загрузить компонент:

const Component1 = lazy(() => import('./pages/component1'));
const Component2 = lazy(() => import('./pages/component2'));

<BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Component1 }/>
        <Route path="/component2" component={Component2 }/>
      </Switch>
    </Suspense>
</BrowserRouter>