ReactJS смена CSS в зависимости от страницы

Впервые работаю с ReactJS и возник вопрос: Как динамически сменять CSS-файл в зависимости от страницы?

К примеру, у меня есть файл: main.css и about.css.
Требуется при переходе на страницу / подружать main.css, а на /about - about.css.

Я в файлах Main.js и в About.js импортирую css-файлы и при выборе страницы, у меня выводятся все css-файлы (main.css + about.css), однако все файлы мне не требуются. На фотографии ниже видно, что подгружено 4 файла (2 раза загружен гугл-шрифт + main.css + about.css), а должно быть 2 файла (гугл-шрифт + main.css).

В интернете написано что-то про bundle-action, но я не могу понять как эту проблему решить.

Пример кода:

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Head from "./components/Head";
import Main from './components/Main';
import About from './components/About';

class App extends Component{
    render() {
        return (
            <Router>
                <Head/>
                <Switch>
                    <Route path="/" exact>
                        <Main/>
                    </Route>
                    <Route path="/about">
                        <About/>
                    </Route>
                </Switch>
            </Router>
        );
    }
}

export default App;

Main.js и About.js

import React, {Component} from 'react';
import '../css/main.css';

class Main extends Component {
    render() {
        return (
           //некоторый код
        );
    }
}

export default Main;

import React, {Component} from 'react';
import '../css/about.css';

class About extends Component {
    render() {
        return (
           //некоторый код
        );
    }
}


export default About;