react+webpack的单页应用,刷新页面就找不到地址,非得从主页链接进入才行?

nodejs react webpack by Xudong Zhang @ 2016-04-23 15:25:33

如题,一个react+react router的单页应用,开发是用webpack dev server总碰到一个问题:

http://localhost:3000/这样访问没问题,在页面里的各个Link跳转到其他页面比如http://localhost:3000/site页没有问题,但是如果一按ctrl+r刷新页面或者直接访问 http://localhost:3000/site 这样的非主页页面就会提示Cannot GET /site.

这样之后就只能先回到 http://localhost:3000/ 然后通过页面链接点过去,非常不方便,有什么好办法规避么?


先说解决的办法吧:

webpack dev server配置里加上historyApiFallback: true,就可以,如

  devServer:{
    contentBase: 'src/www',
    devtool: 'eval',
    hot: true,
    inline: true,
    port: 3000,
    host: '0.0.0.0',
    historyApiFallback: true,
  },

再说说原因吧:

webpack dev server就是个简单的http服务器,当我们请求/的时候实际上是请求src/www/index.html这个文件,当我们请求/site的时候实际上找的是src/www/site这个文件,服务器找不到返回Cannot GET /site是理所当然的。我们可以试试新建一个文件src/www/site里面随便写个hello world什么的,然后再请求/site会发现返回了这个文件的内容。或者新建一个src/www/site/index.html文件也行,因为服务器找不到src/www/site就回去src/www/site/目录找index.html文件,这时候服务器都不会返回Cannot GET /site

因为我们做的是单页应用,这个行为就不是我们所期望的啦,我们希望所有的请求都返回src/www/index.html文件,这个时候historyApiFallback: true这个设置就非常方便了,这个设置的原本解释是把所有404页面都定向到index.html,正好跟我们单页应用的目的是一样的。

by Xudong Zhang @2016-04-23 16:05:36.666 +0800 CST


我来回答

Markdown格式技巧

  • 行尾添加2个空格或者添加一个空行就能换行
  • 斜体: *hello* 或者 _world_
  • 加粗: **hello** 或者 __world__
  • 代码块: 添加空行,然后代码缩进4个空格
  • 特殊字符: 用\避免转义;\*就是*本身
  • python: `__name__`可以以代码形式输出__name__
  • 一个简单的例子

切换到移动版