使用browserHistory时不能刷新

[JackyLeeCS]

刷新后就报404，应该要怎么改？

[sorrycc]

工具换成 roadhog 。

[JackyLeeCS]

@sorrycc
我用的最新版本的dva-cli创建的项目，本身就是用的roadhog，但还是有这个问题

[sorrycc]

roadhog 专门做了处理的，理论上不会有这个问题才对。package.json 贴出来看下?

[JackyLeeCS]

@sorrycc
{
"private": true,
"scripts": {
"start": "roadhog server",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint"
},
"engines": {
"install-node": "6.9.2"
},
"dependencies": {
"animate.css": "^3.5.2",
"antd-mobile": "^0.9.14",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1",
"moment": "latest",
"path-to-regexp": "latest",
"qs": "latest",
"rc-form": "^1.3.0",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"weixin-js-sdk": "^1.2.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.0",
"babel-plugin-transform-runtime": "^6.9.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.12.0",
"redbox-react": "^1.3.2",
"roadhog": "^0.5.2"
}
}

[sorrycc]

package.json 看起来没问题。。你可以试试 dva-example-user-dashboard 有没有问题，没问题的话对比下差异点。

[JackyLeeCS]

@sorrycc
试了一下，像 http://localhost:8000/users 这种路径可以随便刷新，但是如果路径是像 http://localhost:8000/users/users 这样多了一级的话，就只能通过Link跳转过去，直接请求就请求不到了。是我的写法不对还是什么原因？

[JackyLeeCS]

看了一下chrome的调试界面 ，报的是 Uncaught SyntaxError: Unexpected token <

[JackyLeeCS]

dva-example-user-dashboard 也有一样的问题

[sorrycc]

我试了下刷这个没有问题的。

[JackyLeeCS]

@sorrycc
这个路径是可以刷新的，但如果把 /users 改为 /users/users 的话就不能刷新了，只能通过Link跳转

[xuqiang1227]

修改history就可以解决此问题，但是，URL中存在一个#的问题。
参考：https://github.com/dvajs/dva-knowledgemap#切换-history-为-browserhistory

[sorrycc]

browserHistory 时就不应该有 # 吧。

[xuqiang1227]

@sorrycc
以下是代码：

import dva from 'dva';
import 'antd/dist/antd.css';
import { useRouterHistory } from 'dva/router';
import { createHashHistory } from 'history';
import message from 'antd/lib/message';

// 1. Initialize
const app = dva({
  history: useRouterHistory(createHashHistory)({ queryKey: false }),
  onError: (e) => {
    message.error(e.message);
  }
});

在浏览器中输入 http://localhost:8000/ 后，自动变成了
http://localhost:8000/#/

如果将#去掉，无法打开相应的路径。

[18559909452]

我也尝试了，多级路由时 刷新浏览器地址栏：hashHistory可用，browserHistory不可用
（按需加载）

[sorrycc]

browserHistory 不可用是报 404 还是空白页，空白页的话检查下控制台，如果是 js 未载入的话，应该是 publicPath 没配对。

[xuqiang1227]

使用browserHistory 时，将html的js引入方式改为从根下引入。
如下：
<script src="/index.js"></script>

@sorrycc 可以关了这个问题了

[JackyLeeCS]

@kairi1227
感谢，确实是这个问题

[xiaochunyong]

@kairi1227 感谢~ 从根引入，已解决

[yerstd]

实话说，不如自己花时间搭一个react+redux的环境

[xuqiang1227]

我搭建了一个dva的初始化项目。
开发时，可以将html引资源时，修改为 /
打包后，将其修改为 ./
这里面解决了如何使用publicPath的问题，以及APP高清的问题。有兴趣的可以了解一下。

[zchuhui]

我也遇到这个问题，二级域名时，用Link跳转可以，刷新不可以。
我使用上面的方式，也在js文件加了 '/',但还是无效。

是不是我路由写法有问题呢？

	<Route path="/" component={ DataRouter }>
		  <Route path="bg" component={ DataRouter } /> 
	</Route>
		
  		<Route path="/" component={ CreateRelevance }>
		  	<Route path="bg/create" component={ CreateRelevance } />
  		</Route>
   </Router>

@sorrycc

[18559909452]

@sorrycc
这个问题已解决。
browserHistory模式下，因为是spa模式；
需nginx配置： try_files $uri $uri/ /index.html;

[zchuhui]

@18559909452 如果服务器是apache而非nginx，该怎么配置？

[neewbee]

https://gkedge.gitbooks.io/react-router-in-the-real/content/apache.html

[winjeysong]

没看到koa相关的配置方式，贴一下供参考：

const fs = require('fs');
const router = require('koa-router')();

router.get('/*', async (ctx) => {
    const html = fs.readFileSync(path.resolve(filePath));
    ctx.type = 'html';
    ctx.body = html;
  })
...