-1

我正在尝试为我的静态 React 应用程序做一些 SEO。问题是react-snap我用于预渲染只预渲染我的应用程序的首页，因为默认情况下它会向用户打开并且在用户按下按钮之前不会改变。这是我的代码示例：

function App() {
  const [page, switchPage] = useState("home");
  return (
    <div className="App">
      <div id="logo"></div>
      <div>
        <div className="btn-group">
        <button onClick={() => switchPage("home")}>Home</button>
        <button onClick={() => switchPage("news")}>News</button>
        <button onClick={() => switchPage("gallery")}>Gallery</button>
        <button onClick={() => switchPage("blog")}>Blog</button>
        <button onClick={() => switchPage("contact")}>Contact us</button>
        </div>
        {page == "home" &&
        <Home/>
        }
        {page == "news" && 
        <News/>
        }
        {page == "gallery" &&
        <Gallery/>
        }
        {page == "blog" &&
        <Blog/>
        }
        {page == "contact" &&
        <Contact/>
        }
      </div>
    </div>
  );

不幸的是，react-snap 只预渲染“home”组件。我知道这一点是因为我使用在线搜索引擎模拟器工具检查了我的网站，并且只有h2主页上的元素对搜索引擎可见。我也尝试通过使用 React 路由器为每个页面设置路由来解决这个问题，但到目前为止还没有帮助。如何预渲染我的整个应用程序以使其对 Google 可见？谢谢

编辑：我的index.js样子是这样的：

import React from 'react';
import './index.css';
import App from './App';
import { hydrate, render } from 'react-dom';

const rootElement = document.getElementById('root');
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}
4

1 回答 1

1

react-snap不仅呈现一个页面，它还呈现您使用它的任何页面。正确阅读文档https://www.npmjs.com/package/react-snap/v/1.23.0。

除此之外，如果您关心 SEO，我建议您使用 nextjs 或 gatsby。这些框架将为您提供 SSR 的更多功能，而不仅仅是渲染一次。

于 2021-08-05T16:39:57.840 回答