javascript - 当路由更改时，import css 仍然停留在页面中-6ren

javascript - 当路由更改时，import css 仍然停留在页面中

转载作者：行者123 更新时间：2023-11-28 14:58:20

我正在使用两个主要的布局和 react router，如下所示。我已经编写了 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>
  );
}

布局登录注册布局

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;

最佳答案

通过这种方式用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 耦合在一起，并使组件不纯，更难重用等。

关于javascript - 当路由更改时，import css 仍然停留在页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50634482/

文章推荐： html - 粘性 CSS 页脚损坏

文章推荐： html - 如何在 Chrome 扩展中使用 .ttf 字体？

文章推荐： html - 将 Google 自定义搜索输入框放在图像上

首页

博学

6Ren·AI

商城

javascript - 当路由更改时，import css 仍然停留在页面中