使用react-spa-prerender在其他类上重复一个类

Question

我使用React SPA Prerender来优化 SEO，但遇到了这个问题：

\n

我有一个名为 的类HomeTitleContainer，专门用于文件Home.jsx，即主页。

\n

import { Container } from \'react-bootstrap\';\nimport Link from \'../immutable/nav/Link\';\nimport \'./Home.css\';\n\nconst Home = () => {\n  \n    return (\n        <>\n            <Container className="HomeTitleContainer">\n                Ma Th\xc3\xa9matique\n            </Container>\n            <Container className="TableOfContentsLink">\n                <p><Link link={\'/cours\'} internalLink={true} >- Des cours de math\xc3\xa9matiques sur de nombreux sujets</Link></p>\n                <p><Link link={\'/bds-de-jpp\'} internalLink={true} >- Des BDs de Jean-Petit</Link></p>   \n                <p><Link link={\'/jeux\'} internalLink={true} >- Des petits jeux pour s\'am\xc3\xa9liorer</Link></p>            \n            </Container>\n        </>\n    );\n}\n\nexport default Home;\n

\n

这是相应的 css 文件Home.css：

\n

.HomeTitleContainer {\n    position: relative;\n    top: 30px;\n    /* background-color: var(--front-color); */\n    background-image: linear-gradient(to bottom right, var(--front-color), grey);    \n    border-radius: 10px;\n    color: var(--links-color);\n    font-size: large;\n    padding: 30px;\n    width: calc(var(--window-width) * 3 / 4);\n    box-shadow: 20px 20px 5px 5px var(--navbar-color);\n    margin-bottom: 100px;\n}\n\n@media (min-width : 450px) {\n    .HomeTitleContainer {\n        width: calc(var(--window-width) * 1 / 2);\n        top: 50px;\n    }\n}\n

\n

这个HomeTitleContainer类不存在于其他任何地方。\n但是当我根据我的生成一些 html 文件时.rsp.json文件生成一些 html 文件时，这个类存在于所有其他生成的 html 文件中。

\n

为了说明这一点，以课程页面为例......

\n

所有页面都有一个目录，所以我使用这个文件GenericTableOfContents.jsx：

\n

import { Container, Row, Col } from \'react-bootstrap\';\nimport Link from \'../immutable/nav/Link\';\n\nconst GenericTableOfContents = ( {items, prefix, title} ) => {\n\n    return (\n        <>\n            <p className="MainTitle">{title}</p>\n            <Row>\n                {\n                    items.map(item => (\n                        <Container key={item.id} className="TableOfContents">\n                            <Col xs={12} md={12}>\n                                <div key={item.id} className="TableOfContentsLink" >\n                                    <Link link={`/${prefix}/${item.relativePath}`} internalLink={true} >\n                                        <div>{item.title}</div>\n                                    </Link>\n                                </div>\n                            </Col>\n                        </Container>\n                    ))\n                }\n            </Row>\n        </>\n    )\n\n}\n\nexport default GenericTableOfContents;\n

\n

您可以看到 和MainTitle类TableOfContents应该是一个接一个。\n但是在 中cours.html，存在以下示例：

\n

<p class="MainTitle">Tous les cours</p>\n<div class="HomeTitleContainer container">\n<div class="TableOfContents container"> ...\n

\n

尽管它不应该在那里，但HomeTitleContainer已经添加了一个带有该类的 div。

\n

这里是.rsp.json：

\n

{\n    "port": 3000,\n    "buildDirectory": "./build",\n    "routes": [\n        "/",\n        "/cours",\n        "/bds-de-jpp",\n        "/jeux",\n        "/liens"\n    ]\n}\n

\n

这是路由文件 ( AppRoutes.jsx)：

\n

import { Route, Routes } from \'react-router-dom\';\nimport Home from \'./components/home/Home\';\nimport CoursesTableOfContents from \'./components/courses/CoursesTableOfContents\';\nimport ChaptersTableOfContents from \'./components/courses/ChaptersTableOfContents\';\nimport GenericChapter from \'./components/courses/GenericChapter\';\nimport PdfTableOfContents from \'./components/pdf-viewer/PdfTableOfContents\';\nimport PDFViewerPage from \'./components/pdf-viewer/PDFViewerPage\';\nimport GamesTableOfContents from \'./components/games/GamesTableOfContents\';\nimport Links from \'./components/links/Links\';\nimport VCard from \'./components/contact/VCard\';\nimport Error from \'./components/immutable/Error\';\n\nconst AppRoutes = ( {courseItems, pdfItems, gameItems} ) => {\n\n    return  <Routes>\n                {\n                    process.env.NODE_ENV === \'development\' ?\n                        <Route exact path="/" element={<Home />} />\n                            :   <Route exact path="/" element={<Home />} />\n                }\n                <Route path="/cours" element={<CoursesTableOfContents courseItems={courseItems} />} />\n                {courseItems.map(courseItem => {\n                    return  <Route \n                                key={courseItem.id}\n                                path={`/cours/${courseItem.relativePath}`}\n                                element={<ChaptersTableOfContents courseItem={courseItem} />} />\n                \n                })}\n                {courseItems.map(courseItem => (\n                    courseItem.chapters.map(chapter => {\n                        return  <Route \n                                    key={chapter.id}\n                                    path={`/cours/${courseItem.relativePath}/${chapter.relativePath}`}\n                                    element={<GenericChapter chapter={chapter} courseItem={courseItem} />} />\n                    })\n                ))}\n                <Route path="/bds-de-jpp" element={<PdfTableOfContents pdfItems={pdfItems} />} />\n                {pdfItems.map(pdfItem => (\n                    <Route \n                        key={pdfItem.id}\n                        path={`/bds-de-jpp/${pdfItem.relativePath}`}\n                        element={<PDFViewerPage pdfItem={pdfItem} />} />\n                ))}\n                <Route path="/jeux" element={<GamesTableOfContents gameItems={gameItems} />} />\n                {gameItems.map(gameItem => (\n                    <Route \n                        key={gameItem.id}\n                        path={`/jeux/${gameItem.relativePath}`}\n                        element={gameItem.component} />\n                ))}\n                <Route path="/liens" element={<Links />} />\n                <Route path="/contact" element={<VCard />} />\n                <Route path="*" element={<Error />} status={404} />\n            </Routes>\n}\n\nexport default AppRoutes;\n

\n

在 App.js 中添加：

\n

    var courseItems = coursesResourceBuilder();\n    var pdfItems = pdfResourceBuilder();\n    var gameItems = gamesResourceBuilder();\n    <div className="App" >     \n\n            <div className={`${theme} ${font} CopyBook`}>\n                <BrowserRouter>\n                    <Header courseItems = {courseItems} pdfItems ={pdfItems} gameItems={gameItems} /> \n                        <Container className = {` RelativeContainer ${playMode ? "PlayMode" : \'\'}  ${isLoading ? "Blur" : \'\'} `} >                           \n                            <AppRoutes courseItems={courseItems} pdfItems={pdfItems} gameItems={gameItems} />\n                        </Container> \n                    <Footer /> \n                </BrowserRouter>\n            </div> \n\n    </div>\n

\n

这是网站的网址：

\n

https://ma-thematique.netlify.app

\n

https://ma-thematique.netlify.app/cours

\n

有人可以帮我吗？

\n

Answer 1

您可以尝试使用Styled Components避免CSS全局申请：

\n

import styled from 'styled-components';\n\nconst HomeTitleContainer = styled.span`\n  position: relative;\n  top: 30px;\n  background-image: linear-gradient(to bottom right, var(--front-color), grey);\n  border-radius: 10px;\n  color: var(--links-color);\n  font-size: large;\n  padding: 30px;\n  width: calc(var(--window-width) * 3 / 4);\n  box-shadow: 20px 20px 5px 5px var(--navbar-color);\n  margin-bottom: 100px;\n\n  @media (min-width: 450px) {\n    width: calc(var(--window-width) * 1 / 2);\n    top: 50px;\n  }\n`;\n\nexport default HomeTitleContainer;\n

\n

然后在你的组件内部Home：

\n

import { Container } from 'react-bootstrap';\nimport Link from '../immutable/nav/Link';\nimport './Home.css';\nimport HomeTitleContainer from "./HomeTitleContainer";\nimport React, {Fragment} from "react";\n\nconst Home = () => (\n  <Fragment>\n    <Container>\n      <HomeTitleContainer>\n        Ma Th\xc3\xa9matique\n      </HomeTitleContainer>\n    </Container>\n\n    <Container className="TableOfContentsLink">\n      <p><Link link={'/cours'} internalLink={true} >- Des cours de math\xc3\xa9matiques sur de nombreux sujets</Link></p>\n      <p><Link link={'/bds-de-jpp'} internalLink={true} >- Des BDs de Jean-Petit</Link></p>   \n      <p><Link link={'/jeux'} internalLink={true} >- Des petits jeux pour s'am\xc3\xa9liorer</Link></p>            \n    </Container>\n  </Fragment>\n)\n\nexport default Home\n

\n

您能尝试一下并让我们知道结果是什么吗？

\n

这里有两件事试图解决这个问题：

\n

\n
1. 使用Fragmentempty tag代替 -A FragmentFragment 允许您对子级进行分组，而无需向 DOM 添加额外的节点，并使您的组件结构和渲染逻辑更加清晰简洁。另一方面，空标签不提供这些好处，并且可能会导致额外的、不必要的 DOM 节点。这可能会导致一些异常行为，尤其是在旧版本的 React 中。
\n
2. 使用CSS文件而不是styled-components. 如果您使用一个CSS文件，CSS 将全局应用，如果您不够小心，您可以轻松地使用在您的CSS文件之一中已定义属性的类名来渲染 div。
\n

\n