用 react + react-router + redux + webpack + es6 写的个人博客

#3

跳转是用了 react-router 做处理的，加了 # 的 hash 路由是让 url 路径产生变化，以便让浏览器可以前进后退。

#4

原来还可以这样， 因为 username.github.io/project 对应的是单独项目的 gh-pages， 所以不知道路由跳转怎么破。

谢谢。

#5

在文章列表页点击某个文章进入文章详情页，然后按后退键，这时候列表页不重新获取数据渲染，而是用之前的数据，是不是需要用redux来实现

#6

请求接口后的数据是保存在 redux 的 store 中，实际上就是保存在 state 中，如果不去刷新浏览器就不会再去网络请求。没有 redux 也可以保存在 react 的 state 中，因为使用了 react-router 所以整个页面并没有实际刷新，所以 state 会一直存在。

#7

但是我用react的state，按浏览器返回键后就重新从服务器获取数据了呢，我用的react router v4，这个会有区别吗

#8

你需要在网络请求之前判断 state 是否为空，是的话就去请求数据，如果不为空则不去网络请求即可。

#9

哦好的，我晚上试试，谢谢你

#10

好像不行，每次浏览器回退键，state总是空的，所以每次都去请求数据

#11

嗯我研究明白了，每次按返回键，component都会重新渲染，所以state是空的，需要在componentWillUnmount的时候把state存到其他的变量里，然后componentDidMount的时候检查这个变量。说到底，还是redux类似的思路，store放在component外面。

React页面跳转以及刷新的问题？
#12

原来如此，我也没有去想到 state 会重置。如果将 state 存放到父组件中应该就不会重置了。

#13

好棒，感觉要转前端了

#14

做得不错！
在这里有个问题想请教一下，
构建之后的vendor.js是如何压缩到只有70多k的？
我压缩了之后的vendor.js有280多k…
（ 主要模块为：‘vendor’: [‘react’, ‘react-dom’, ‘react-router’, ‘redux’, ‘redux-thunk’]）
各种设置也试过了，也参考了一下楼主webpack的配置，还是没有办法进一步压缩…
楼主在压缩文件方面有什么经验吗~
谢谢解答！

#15

我的 vendor.js 压缩后实际也是有 200 多 KB，变成 70 多 KB 主要是因为开启了 gzip。

#17

get！
谢楼主解答， 服务端还没弄过呢。
看了一下楼主的actions…
发现没有弄fetch用的jq，之前我也是用的jq现在改用fetch遇到坑了:joy:

#18

是的，之前用 fetch 有问题暂时没解决成功，所以先用 jquery 顶替一段时间

#19

v3.4 版本 已经正式上线，修改如下：

  • css 判断移动端，去掉 hover；
  • css 文件分离；
  • 修复进度条特殊情况一直显示bug；
  • 使用 fetch 替代 jquery。
#21

可以分享一下文章模块的具体实现思路吗？

#22

该怎么说呢。文章模块的源码在这里。

1、现在把多说评论框去掉了，也简单了一点；
2、该模块用的数据在 store 里面，这个模块里获取 props 的数据就是文章内容了；
3、获取到内容，在 render 的时候通过 marked（转化 markdown 语法）和 highlight.js（代码高亮）两个第三方库来显示出来，主要是使用这两个库的一些 api；
4、就这些了，没其它的了。

#23

过了一年，好久没更新了，再更新一波 v3.5 版本。

主要是修复了一些兼容的问题，还是非常适合新手学习 react 和 redux 入手的。

接下来计划：

  1. 更新 node 和 npm 环境；
  2. 更新 webpack 版本；
  3. 更新 react 与 redux 相关版本。
#24

进到详情，返回不刷新的问题，初学者项目要用到，可以给些具体代码吗～