Dva: Não é possível atualizar ao usar o browserHistory

Criado em 15 fev. 2017  ·  25Comentários  ·  Fonte: dvajs/dva

404 é relatado após a atualização, como devo alterá-lo?

faq question

Comentários muito úteis

Ao usar browserHistory, altere o método de importação js de html para importar da raiz.
do seguinte modo:
<script src="/index.js"></script>

@sorrycc pode resolver este problema

Todos 25 comentários

A ferramenta foi substituída por roadhog .

@sorrycc
O projeto que criei com a versão mais recente do dva-cli é um roadhog, mas ainda tem esse problema.

Roadhog tratou especificamente disso. Em teoria, esse problema não existirá. package.json postar para ver?

@sorrycc
{
"privado": verdadeiro,
"scripts": {
"start": "servidor roadhog",
"build": "roadhog build",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint"
},
"motores": {
"install-node": "6.9.2"
},
"dependências": {
"animate.css": "^ 3.5.2",
"antd-mobile": "^ 0.9.14",
"babel-runtime": "^ 6.9.2",
"dva": "^ 1.2.1",
"momento": "mais recente",
"path-to-regexp": "mais recente",
"qs": "mais recente",
"formato rc": "^ 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",
"esperar": "^ 1.20.2",
"husky": "^ 0.12.0",
"redbox-react": "^ 1.3.2",
"roadhog": "^ 0.5.2"
}
}

package.json parece bem. . Você pode tentar dva-example-user-dashboard para ver se há algum problema. Se não houver problema, compare as diferenças.

@sorrycc
Eu tentei. Caminhos como http: // localhost : 8000 / users podem ser atualizados à vontade, mas se o caminho for mais um nível como http: // localhost : 8000 / users / users, você só poderá pular através de Link. Se você vira, você não pode solicitá-lo diretamente. Minha escrita está errada ou qual é o motivo?

Dei uma olhada na interface de depuração do chrome e ela relatou Uncaught SyntaxError: Unexpected token <

dva-example-user-dashboard tem o mesmo problema

image

Tentei escovar isso sem nenhum problema.

@sorrycc
Este caminho pode ser atualizado, mas se você alterar / users para / users / users, ele não pode ser atualizado, você só pode pular através do link
wx20170216-120305 2x
wx20170216-120322 2x

Modificar o histórico pode resolver este problema, mas há um # problema no URL.
Referência: https://github.com/dvajs/dva-knowledgemap#Switch-history-to-browserhistory

Não deve haver # browserHistory.

@sorrycc
Aqui está o código:

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);
  }
});

Depois de inserir http://localhost:8000/ no navegador, ele se torna automaticamente
http://localhost:8000/#/

Se você remover #, o caminho correspondente não poderá ser aberto.

Eu também tentei atualizar a barra de endereço do navegador durante o roteamento de vários níveis: hashHistory está disponível, browserHistory não está disponível (carregar sob demanda)

BrowserHistory não está disponível. Ele está relatando 404 ou uma página em branco? Se a página estiver em branco, verifique o console. Se js não estiver carregado, deve ser que publicPath não corresponde .

Ao usar browserHistory, altere o método de importação js de html para importar da raiz.
do seguinte modo:
<script src="/index.js"></script>

@sorrycc pode resolver este problema

@ kairi1227
Obrigado, é realmente o problema

@ kairi1227 obrigado ~ introduzido a partir da raiz, foi resolvido

Para ser honesto, é melhor reservar um tempo para construir um ambiente react + redux.

Eu construí um projeto de inicialização dva.
Ao desenvolver, você pode modificar o html para / ao citar recursos
Após a embalagem, modifique-o para ./
Isso resolve o problema de como usar publicPath e o problema do APP HD. Quem estiver interessado pode descobrir.

Eu também encontrei este problema. Quando o nome de domínio de segundo nível é usado, Link pode ser usado para redirecionar, mas atualizar não.
Usei o método acima e adicionei um '/' ao arquivo js, ​​mas ainda era inválido.

Há algum problema com meu roteamento?


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

@sorrycc

@sorrycc
Esse problema foi resolvido.
No modo browserHistory, porque é o modo spa;
Requer configuração nginx: try_files $ uri $ uri / /index.html;

@ 18559909452 Como configurar se o servidor é apache em vez de nginx?

Não vi métodos de configuração relacionados ao koa, poste-os para referência:

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;
  })
...
Esta página foi útil?
0 / 5 - 0 avaliações