当路由更改时，导入css仍然停留在页面中
当路由更改时，导入css仍然停留在页面中
提问于 2018-06-01 08:15:53
我在react路由器上使用两个主要布局，如下所示。我已经编写了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 Layout
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;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-01 08:24:07
在组件挂载/卸载时，通过这种方式导入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耦合，并使组件变得不纯，更难重用等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50634482
复制相关文章
相似问题