路由的不同css样式表

Question

我对 react 和 react-router-dom 还是很陌生。问题是，我试图在我的应用程序中为不同的路线获得不同的布局。但是，不同路由的所有 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;

有没有办法只导入具有特定路由的特定 css 文件？比如 home.css 对应 '/' 路由，about.css 对应 '/about' 路由？

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

Answer 1

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

- 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 {
    ...
  }

Answer 2

React 做了一个 SPA，这意味着：单页应用程序.. 所有资源都在应用程序启动时加载，如果其他资源在第二个时刻加载，则这些资源在整个应用程序中都可用。

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

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

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

然后使用页面类定位您的 css：

.home h1{
color:red;
}

.contact h1{
color:blue;
}