Question

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

问题是当我从“/ login”或“/ register”路由回到“/”home时，一些与“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;

Answer 1

以这种方式使用webpack导入CSS不会在组件安装/卸载时加载/卸载css。

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

使用

包装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耦合，并使组件不可用，更难以重复使用等。

路线更改时，导入css仍会保留在页面中

1 个答案: