路由更改时 import css 仍停留在页面中答案

【问题标题】：import css still stays in page when route changes路由更改时 import css 仍停留在页面中
【发布时间】：2018-11-11 01:37:46
【问题描述】：

我正在使用两个主要布局和如下所示的反应路由器。我已经编写了 AppRoute 组件来使用带有开关的不同布局。

问题是当我从“/login”或“/register”路由返回“/”主页时，一些与“LayoutLoginRegister”相关的导入 css 仍保留在浏览器中。所以它打破了页面。因为这个css属于“LayoutLoginRegister”而不是“LayoutLanding”

App.js

 const AppWrapper = styled.div`
  margin: 0 auto;
  min-height: 100%;
`;

const AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route
    {...rest}
    render={(props) => (
      <Layout>
        <Component {...props} />
      </Layout>
    )}
  />
);

AppRoute.propTypes = {
  component: React.PropTypes.any.isRequired,
  layout: React.PropTypes.any.isRequired,
};


export default function App() {
  return (
    <AppWrapper>
      <Helmet
        titleTemplate="%s - React.js Boilerplate"
        defaultTitle="React.js Boilerplate"
      >
        <meta name="description" content="A React.js Boilerplate application" />
      </Helmet>
      <Switch>
        <AppRoute exact path="/" layout={LayoutLanding} component={HomePage} />
        <AppRoute path="/features" layout={LayoutLanding} component={FeaturePage} />
        <AppRoute path="/login" layout={LayoutLoginRegister} component={LoginPage} />
        <AppRoute path="/register" layout={LayoutLoginRegister} component={RegisterPage} />
      </Switch>
    </AppWrapper>
  );
}

LayoutLoginRegister 布局

import React from 'react';
import PropTypes from 'prop-types';
import './LayoutLoginRegister.scss';

export class LayoutLoginRegister extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

LayoutLoginRegister.propTypes = {
  children: PropTypes.object.isRequired,
};

export default LayoutLoginRegister;

【问题讨论】：

标签： javascript css reactjs react-router

【解决方案1】：

这种方式用webpack导入css在组件挂载/卸载时不会加载/卸载css。

我建议为你的 css 样式命名空间，因为你正在为你的布局使用 scss 和单独的文件，这应该很容易。

用

包装 LayoutLoginRegister.scss 的内容

.component-LayoutLoginRegister {
    [layout login styles go here]
}

然后给你的 LayoutLoginRegister 组件添加一个类

render() {
    return (
      <div className="component-LayoutLoginRegister">
        {this.props.children}
      </div>
    );
}

CSS 将保持加载状态，但不会影响除 LayoutLoginRegister 组件之外的任何内容。

如果您需要将样式应用于共享的内容，例如 <body> 当组件挂载/卸载时，您可以向 body/HTML 元素添加一个类。

export class MyComponent extends React.Component {
    componentDidMount() {
        document.body.classList.add('MyComponent-mounted');
    }

    componentDidUnmount() {
        document.body.classList.remove('MyComponent-mounted');
    }
}

尽管除非绝对必要，否则我通常会避免这种情况，因为它会将您的组件与 document.body 耦合，并使组件不纯，更难重用等。

【讨论】：

感谢您的解决方案。这样我就可以达到预期的效果。