在react中加入react-helmet和prerender-spa-plugin，对多语言的处理背景：因为客户的网站

背景：因为客户的网站需要分享到facebook这类可以抓取到meta信息的网站上，因为爬虫指挥爬取静态的页面，而使用js生成的动态的title和descroption之类的seo信息是没办法抓取到的，所以就用到了react-helment去生成meta信息，同时需要使用prerender-spa-plugin将页面变成静态页面，生成类似服务端渲染的效果。

react-helment的使用

react-helment的github地址使用yarn或者npm都可以安装 yarn add react-helmet或者npm install --save react-helmet 因为网站是中英文的，所以需要根据语言来生成不同的title，description等信息可以直接在App.tsx里面使用

 <Helmet>
  <title>
    { language === 'zh-tw'  ? '中文标题'   : 'english title'  }
  </title>
  <meta name="description" content={
    language === 'zh-tw' ? "中文描述" : 'english description' } 
  />
</Helmet>

这样的话就会生成对应的信息了。 注意：最好把index.html里面的title和description信息删掉，因为不删除的话，会出现两个title两个description

做到这里只是成功了一半，这样的话在facebook分享的时候还是不能获取相应的结果，因为这样生成的还是属于动态的标签，所以这时候就需要prerender-spa-plugin登场了

prerender的github地址安装的话还是老样子，直接说配置了

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../build'),
  indexPath: path.join(__dirname, `../build${paths.servedPath}`, 'index.html'), 
  outputDir: path.join(__dirname, `../build${paths.servedPath}`),
  routes: [
    '/',
    ...[].concat.apply([], allPrerenderRoutes)
  ],
}),

这个是我的配置，

staticDir：是使用哪个文件夹作为模板目录
indexPath：是哪个作为索引的文件，一般都是index.html
outputDir：输出目录，就是指prerender生成的内容放在那里
routes：代表你想用prerender生成那些目录 routers:['en', 'cn', 'en/a', 'en/b],这样的话就会生成en,cn两个主文件夹，en文件夹下面还会有a和b两个文件夹，每个文件夹下面都会有index.html。 路径不能用hash模式，只能用history模式 可能会遇到的问题： *Chromium revision is not downloaded. Run "npm install" or "yarn install"*建议直接使用cnpm安装prerender，血与泪的教训。