问题描述
我正在迁移 React SPA,我对 Next.js 非常陌生。我的问题是当我加载我的主页时它加载得很好但是当我刷新页面时它将错误的 classNames 分配给错误的组件。现在只发生在我的侧边栏组件上。
import React,{ useContext } from "react";
import { AuthContext } from "../../../contexts/AuthContext";
import Avatar from "../Avatar";
import ArrowIcon from "../../../assets/icons/arrow.svg";
import HomeIcon from "../../../assets/icons/home-run.svg";
import ChatIcon from "../../../assets/icons/comment.svg";
import RocketIcon from "../../../assets/icons/start-button.svg";
import SchoolIcon from "../../../assets/icons/school.svg";
import QuestionIcon from "../../../assets/icons/question.svg";
import loveIcon from "../../../assets/icons/love.svg";
import WorkIcon from "../../../assets/icons/work.svg";
import SettingsIcon from "../../../assets/icons/settings.svg";
import SearchBar from "../SearchBar";
import {useRouter} from 'next/router'
import styles from "./index.module.css";
function SideBar({ setMenuOpen,className,...props }) {
const router = useRouter()
const { currentUser } = useContext(AuthContext);
const goTo = (link) => {
router.push(link);
if (setMenuOpen) {
setMenuOpen(false);
}
};
const avatar = styles['avatar']
console.log(styles['avatar']);
console.log(avatar);
return (
<div className={className}>
<ArrowIcon className={styles["close-button"]}
alt="close"
onClick={() => {
setMenuOpen(false);
}}/>
{currentUser && (
<>
<Avatar
width="100px"
className={"SideBar_avatar__u-NXU"}
image={
currentUser.get("profilePicture") &&
currentUser.get("profilePicture").url()
}
/>
<span className={styles.username}>
@{currentUser.attributes.username}
</span>
</>
)}
{console.log(styles.searchbar)}
<SearchBar className={styles['searchbar']} />
<ul className={styles.menu}>
<li
onClick={() => {
goTo("/home");
}}
>
<HomeIcon alt="option" className={styles["menu-icon"]}/>
{/* <img src={homeIcon} /> */}
<span>Feed</span>
</li>
<li>
<RocketIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={rocketIcon} /> */}
<span>Descubre</span>
</li>
<li>
<ChatIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={chatIcon} /> */}
<span>Chat Global</span>
</li>
<li
onClick={() => {
goTo("/schools");
}}
>
<SchoolIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={schoolIcon} /> */}
<span>Escuelas</span>
</li>
<li
onClick={() => {
goTo("/question/");
}}
>
<QuestionIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={questionIcon}
/> */}
<span>Pregunta</span>
</li>
<li
onClick={() => {
goTo("/unicrush/");
}}
>
<loveIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={loveIcon} /> */}
<span>UniCrush</span>
</li>
<li
onClick={() => {
goTo("/job/");
}}
>
<WorkIcon alt="option" className={styles["menu-icon"]}/>
{/* <img alt="option" className={styles["menu-icon"]} src={workIcon} /> */}
<span>Trabajos</span>
</li>
</ul>
<div className={styles.footer}>
<div
className={styles["settingsOption"]}
onClick={() => {
goTo("/settings");
}}
>
<SettingsIcon alt="option" className={styles["menu-icon"]}/>
{/* <img
alt="option"
className={styles["menu-icon"]}
src={settingsIcon}
/> */}
<span>Adjustes</span>
</div>
<span>Contactanos!</span>
</div>
</div>
);
}
SideBar.defaultProps = {
className: styles.container,};
export default SideBar;
你可以看到我控制台记录了 classNames,当我记录它们时它们是正确的,但是当我刷新时它们会改变。
这是我的侧边栏第一次加载时的样子 enter image description here enter image description here
这是刷新后的样子 enter image description here enter image description here
这是侧边栏的 CSS,我使用的是 CSS 模块。
.container {
display: flex;
flex-direction: column;
background: #fff;
position: absolute;
height: 100vh;
top: 0;
width: 200px;
Box-shadow: 2px 0 5px 1px #a9a6a64d;
}
.close-button {
display: none;
}
.avatar {
margin: auto;
margin-top: 10px;
}
.username {
text-align: center;
font-size: large;
color: #5d5d5d;
}
.menu {
list-style: none;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.menu-icon {
width: 20px;
height: 20px;
}
.menu li {
display: flex;
padding: 10px 15px;
}
.menu li span {
margin-left: 10px;
font-size: 20px;
}
.searchbar {
display: none;
}
.footer {
margin: 10px 0px;
display: flex;
width: 100%;
justify-content: space-around;
}
.settingsOption {
display: flex;
}
.settingsOption span {
margin-left: 3px;
}
/* Device = Most of the Smartphones Mobiles (Portrait) and Low Resolution tablets
Screen = B/w 320px to 767px
*/
@media (max-width: 768px) {
.container {
width: 100%;
overflow: scroll;
align-items: center;
z-index: 2;
position: fixed;
}
.searchbar {
display: flex;
margin: 15px 0px;
}
.close-button {
align-self: end;
display: flex;
width: 25px;
margin: 10px;
}
.menu {
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
}
}
解决方法
这里有 2 个可能性,
- 装载机
尝试在 next.config.js 中添加 css loader 如下
const withImages = require('next-images')
module.exports = withImages({
target: 'serverless',webpack: function (config,{ webpack }) {
config.module.rules.push({
test: /\.(eot|svg|gif|md)$/,loaders: ['style-loader','css-loader','less-loader']
})
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
ENV: JSON.stringify(process.env.ENV),}
}))
return config
},
})
- 使用 (_document.js) 检查样式组件。 https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68