路由的不同css样式表

我是一个新的反应和反应。问题是，我试图在我的应用程序中为不同的路由获得不同的布局。但是，不同路线的所有css文件只是导入到一个巨大的冲突块中

应用程序如下所示：

<Router>
  < >
    <Navigation />
    <UpButton />
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/research" component={Research} />
      <Route path="/publications" component={Publications} />
      <Route path="/student" component={Student} />
      <Route path="/about" component={About} />
    </Switch>
  </>
</Router>

import React from 'react';
import './home.scss';

// Utility
import Utility from 'components/utility/Utility';

class Home extends React.Component {
  render() {
    return (
      < >
        <Utility />
      </>
    );
  }
}

export default Home;

< >

我渲染的每个组件如下所示：

<Router>
  < >
    <Navigation />
    <UpButton />
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/research" component={Research} />
      <Route path="/publications" component={Publications} />
      <Route path="/student" component={Student} />
      <Route path="/about" component={About} />
    </Switch>
  </>
</Router>

import React from 'react';
import './home.scss';

// Utility
import Utility from 'components/utility/Utility';

class Home extends React.Component {
  render() {
    return (
      < >
        <Utility />
      </>
    );
  }
}

export default Home;

从“React”导入React；
导入“/home.scss”；
//效用
从“组件/实用程序/实用程序”导入实用程序；
类Home扩展了React.Component{
render（）{
返回(
< >
);
}
}
导出默认主页；

有没有办法只导入带有特定路径的特定css文件？比如home.css代表“/”路线，about.css代表“/”路线

---

这可能是我的一个简单误解，但我现在真的找不到任何解决办法。

React做了一个SPA，意思是：单页应用程序。。所有资源都在应用程序启动时加载，如果其他资源在一秒钟内加载，则这些资源将在整个应用程序中可用

我认为，为了避免冲突，您需要更好地定位您的页面，例如，您可以将页面包装在pagename为类的容器中，例如：

class Home extends React.Component {
  render() {
    return (
      <div classname="home">
        <Utility />
      </div>
    );
  }
}

class Contact extends React.Component {
  render() {
    return (
      <div classname="contact">
        /*...*/
      </div>
    );
  }
}

---

我建议使用以下文件结构和模式：

- components
  - Main.js
  - Utility
    - index.js
    - styles.scss
- pages
    - HomePage
      - index.js
      - styles.scss

然后在组件的样式表中指定与组件相关的样式，并在页面的样式表中指定页面实现的样式。并将页面用于路由，而不是组件。 最后，将每个组件包装到特定的类选择器中，并将所属的sass文件添加到该选择器中（如

.home page

）。 因此，请使用sass而不是css，因为您可以在彼此之间嵌入样式定义，并使用顶部的样式定义作为“名称空间”。因此，这些样式不会相互影响

// Main.js
  import HomePage from '../pages/HomePage';

  <Switch>
    <Route path="/" exact component={HomePage} />
    <Route path="/research" component={ResearchPage} />


// HomePage/index.js

  import Utility from './components/Utility';
  import './styles.scss';
  ...
  render(){
    <div className="home-page">
      <Utility />
    </div>
  }

// HomePage/styles.scss    
  .home-page {
    ...
  }

// Utility/index.js

  import './styles.scss';
  ...

  render(){
    return (
      <div className="utility-comp">
      ...
      </div>
  }


// Utility/styles.scss
  .utility-comp {
    ...
  }

//Main.js
从“../pages/HomePage”导入主页；
//主页/index.js
从“./components/Utility”导入实用程序；
导入“./styles.scss”；
...
render（）{
}
//主页/styles.scss
.主页{
...
}
//实用程序/index.js
导入“./styles.scss”；
...
render（）{
返回(
...
}
//实用程序/styles.scss
公共事业公司{
...
}

哦，我想到了。我现在就试试！谢谢！谢谢你的回复！我也这么做了，但仍然将所有样式都整合到一个巨大的块中。我想，当我进行页面导入时，它将导入的样式与它们结合在一起。我利用使用scss的优势改进了我的答案。请看一看。信不信由你，我使用的是.scss现在也一样。使用className=“page name”将页面组件呈现到div中，并在其中嵌套布局。page name{@contents}它现在可以工作了，非常好。谢谢！不过，我觉得可以用更好的方法来完成。谢谢你的帮助和时间。