Dva: 使用browserHistory时不能刷新

Created on 15 Feb 2017  ·  25Comments  ·  Source: dvajs/dva

刷新后就报404,应该要怎么改?

faq question

Most helpful comment

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

@sorrycc 可以关了这个问题了

All 25 comments

工具换成 roadhog

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

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

@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"
}
}

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

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

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

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

image

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

@sorrycc
这个路径是可以刷新的,但如果把 /users 改为 /users/users 的话就不能刷新了,只能通过Link跳转
wx20170216-120305 2x
wx20170216-120322 2x

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

browserHistory 时就不应该有 # 吧。

@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/#/

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

我也尝试了,多级路由时 刷新浏览器地址栏:hashHistory可用,browserHistory不可用
(按需加载)

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

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

@sorrycc 可以关了这个问题了

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

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

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

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

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

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


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

@sorrycc

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

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

没看到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;
  })
...
Was this page helpful?
0 / 5 - 0 ratings