React + React Router + GitHub Pages + Google Analytics踩坑之路

React + React Router + GitHub Pages + Google Analytics踩坑之路

作者：LiuST

我用React制作了一个单页应用(SPA)，在后来的发布在GitHub Pages（或Coding Pages、Gitee Pages）上、引入React Router (v4)、使用Google Analytics分析用户浏览量，乃至用Google AdSense发布广告的过程遇到了许多问题（主要与React Router有关），并且很少看到有人讨论这些问题（可能是这个做法很奇葩吧），于是有了这篇文章记录踩坑之路。

这篇文章并不是教程，许多中间的步骤被省略。如果你略懂这些技术，想采用同样的方法建网站，也许会对你有所帮助。

P.S. 我的网站地址为https://lemonjing.com，欢迎访问。

创建React应用

（这部分借鉴了教程serverless stack）

初始化React应用

使用create-react-app脚手架初始化react应用。

npx create-react-app my-app --use-npm

运行react应用。

cd my-app
npm start

在git托管平台（如GitHub）上，新建一个repo，得到repo url，如https://github.com/username/my-app.git。

将本地的react应用与远程仓库连接。

git init
git add .
git commit -m "First commit"
git remote add origin https://github.com/username/my-app.git
git remote -v
git push -u origin master

处理路由

我的网站里有不同的页面，如App1、App2。进入网站后是有一个主页，提供到App1、App2的链接。所以需要用到路由React Router。

安装React Router v4。

npm install react-router-dom@5.0.1 --save

修改src/index.js：

import { BrowserRouter as Router } from 'react-router-dom';

// ...

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

新建src/Routes.js：

import React from "react";
import { Route, Switch } from "react-router-dom";
// Home.js的内容在后文
import Home from "./containers/Home";
// 假设我有App1、App2在 src/containe