路线的不同 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 {
    ...
  }