[英]Next.js refreshing page breaks css classNames
我正在遷移一個 React SPA,我對 Next.js 很陌生。 我的問題是,當我加載主頁時,它加載正常,但是當我刷新頁面時,它會將錯誤的類名分配給錯誤的組件。 現在只發生在我的側邊欄組件上。
這是我的側邊欄組件代碼
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;
你可以看到我控制台記錄了類名,當我記錄它們時它們是正確的,但當我刷新它們時它們會改變。
這是我的側邊欄首次加載時的外觀 在此處輸入圖像描述 在此處輸入圖像描述
這就是刷新后的樣子 在此處輸入圖像描述 在此處輸入圖像描述
這是側邊欄的 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 加載器,如下所示
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
},
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.