如何预渲染条件渲染逻辑内的React组件以优化站点SEO？

你当前的页面切换基于React内部state实现，没有对应独立的URL路径，react-snap默认只会预渲染站点根路径（/）的内容，自然只能拿到首页的内容。就算你加了React Router如果没配置react-snap的爬取规则、或者没做好跳转逻辑兼容，也没法生效：你之前配置React Router后不生效，大概率是没有显式指定react-snap的爬取路径，且没有将跳转按钮替换为带路径属性的Link组件，react-snap无法识别内部state触发的跳转，自然爬不到其他页面内容。

步骤1：正确配置React Router，给每个页面对应独立路径 #

别用state控制页面展示，换成React Router的路由匹配逻辑，这样每个页面都有独立URL，方便预渲染工具爬取。
先安装依赖：npm install react-router-dom
修改App.js代码：

import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import News from './News';
import Gallery from './Gallery';
import Blog from './Blog';
import Contact from './Contact';

function App() {
  return (
    <div className="App">
      <div id="logo"></div>
      <div>
        <div className="btn-group">
          {/* 把button嵌套在Link组件内，对应各自路径 */}
          <Link to="/"><button>Home</button></Link>
          <Link to="/news"><button>News</button></Link>
          <Link to="/gallery"><button>Gallery</button></Link>
          <Link to="/blog"><button>Blog</button></Link>
          <Link to="/contact"><button>Contact us</button></Link>
        </div>
        {/* 路由匹配逻辑 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/news" element={<News />} />
          <Route path="/gallery" element={<Gallery />} />
          <Route path="/blog" element={<Blog />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </div>
  );
}

修改index.js，给App套上路由容器：如果你的站点是静态托管没有配置服务端路由回退规则，优先用HashRouter避免刷新404问题，配置如下：

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

const rootElement = document.getElementById('root');
const AppWithRouter = <HashRouter><App /></HashRouter>;

if (rootElement.hasChildNodes()) {
    hydrate(AppWithRouter, rootElement);
} else {
    render(AppWithRouter, rootElement);
}

步骤2：配置react-snap爬取所有路径 #

在你的package.json里添加react-snap的配置项，指定所有需要预渲染的路径：

• 如果你用的是BrowserRouter，配置如下：

{
  "reactSnap": {
    "include": [
      "/",
      "/news",
      "/gallery",
      "/blog",
      "/contact"
    ]
  }
}

• 如果你用的是HashRouter，路径要加#前缀，配置如下：

{
  "reactSnap": {
    "include": [
      "/",
      "/#/news",
      "/#/gallery",
      "/#/blog",
      "/#/contact"
    ]
  }
}

步骤3：补充SEO优化 #

• 每个页面组件里用react-helmet-async配置独立的title、meta描述、h1标签，搜索引擎会优先抓取这些内容
• 预渲染完成后可以本地打开build文件夹里的各个html文件，直接查看源码确认对应页面的内容已经被渲染到静态html里，再用搜索引擎模拟器测试即可

内容的提问来源于stack exchange，提问作者Mr. Engineer