ReactJS 根据页面更改 css

我是第一次使用 ReactJS，问题出现了：如何根据页面动态更改 CSS 文件？

例如，我有一个文件：main.css和about.css.
进入页面时需要/交朋友main.css，并且/about- about.css。

我在 filesMain.js和 in 中导入 css 文件About.js，当我选择一个页面时，我会得到所有 css 文件（main.css+ about.css），但我不需要所有文件。下图显示加载了 4 个文件（Google Font + main.css+ 2 次加载about.css），但应该有 2 个文件（Google Font + 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;