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