Docusaurus生产静态站点切换站点警告渲染逻辑失效问题
Docusaurus生产环境条件渲染警告消息异常问题
我编写了以下代码,用于实现站点切换时的警告消息渲染逻辑:当用户通过点击按钮或直接URL访问切换站点(community/cloud)时,页面显示警告消息,刷新页面后消息消失。该逻辑在Docusaurus本地开发服务器中运行正常,但构建为生产静态站点后表现异常。
import Cookies from 'js-cookie'; import React from 'react'; import { DocProvider } from '@docusaurus/theme-common/internal'; import { HtmlClassNameProvider } from '@docusaurus/theme-common'; import { translate } from '@docusaurus/Translate'; import CommunityLinkGroup from "@site/src/components/LinkGroup"; import DocItemLayout from '@theme/DocItem/Layout'; import DocItemMetadata from '@theme/DocItem/Metadata'; import styles from "./index.module.css"; export default function DocItem(props) { const docHtmlClassName = `docs-doc-id-${props.content.metadata.unversionedId}`; const MDXComponent = props.content; const url = props.location.pathname; const prevEdition = Cookies.get('doc_edition'); let displayAlert = false; if (url.includes('/community/')) { Cookies.set('doc_edition', 'community'); if (prevEdition === 'cloud') { displayAlert = true; } } else if (url.includes('/cloud/')) { Cookies.set('doc_edition', 'cloud'); if (prevEdition === 'community') { displayAlert = true; } } let alertMsg = "bad msg"; let alertClass = "badcls"; let alertRole = "badrole"; if (displayAlert) { alertMsg = translate({ id: 'theme.DocItem.switchDocAlertMsg', message: 'you just switched site, please notice.', }); alertClass = "alert alert--warning"; alertRole = "alert"; } console.log(alertMsg, alertClass, alertRole); return ( <DocProvider content={props.content}> <HtmlClassNameProvider className={docHtmlClassName}> <div className={alertClass} role={alertRole}>{alertMsg}</div> <DocItemMetadata /> <DocItemLayout> <MDXComponent /> </DocItemLayout> <div className={styles.communityLinkContainer}> <CommunityLinkGroup /> </div> </HtmlClassNameProvider> </DocProvider> ); }
本地开发服务器效果(正常)

生产静态站点效果(异常)

异常细节
- 生产站点控制台输出
you just switched site, please notice. alert alert--warning alert,说明displayAlert的值应为true - 但DOM显示状态却同时包含了
displayAlert为true和false时的内容(警告消息和"bad msg"同时出现) - 仅当直接通过URL路径访问时会触发该问题,点击网站内部按钮切换站点时,警告消息可正常动态渲染
内容的提问来源于stack exchange,提问作者timfeirg
相关产品推荐
相关产品推荐

