Mise à niveau du routeur React et remplacement de hashHistory par browserHistory

j'ai un thème bootstrap+react qui utilisait react-router 1.x et hashHistory et je voulais enlever le hash ainsi suivi ce conseil . Au début j'ai essayé de le faire tout en ayant le 1.j'ai donc décidé de mettre à jour le routeur react à 2.x. Après l'installation de réagir-routeur 2.x l'application fonctionnait parce qu'elle utilisait encore hashHistory mais quand je l'ai remplacée par browserHistory:

  • il a montré un écran gris
  • le HTML de l'application avait seulement le <noscript data-reactid=".0"></noscript> étiquette à l'intérieur de lui
  • les outils du développeur React m'ont montré que le routeur avait un null à l'intérieur de lui
  • j'ai également vérifié l'onglet Réseau et tous les fichiers ont été téléchargés correctement, et avaient le bon contenu

  • étonnamment, il n'y avait rien d'imprimé dans la Console JavaScript, pas d'erreur/Pas de warnging (je suis vraiment choqué à ce sujet, mais je suis nouveau réagir, je voudrais savoir ce qu'il faut faire dans des situations comme celle-ci). Voici mes modifications de Router.jsx : 

     import React from 'react'
 import {render} from 'react-dom'
-import {Router} from 'react-router'
+// import {Router} from 'react-router'
+import { Router, Route, Link, browserHistory } from 'react-router'
+// import { useRouterHistory } from 'react-router'
+// import { createHashHistory } from 'history'
+// import { createBrowserHistory } from 'history'`

 import History from '../components/layout/navigation/classes/History.js';

 import Routes from './Routes.jsx';

+// const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
+
 var rootInstance = render((
-    <Router history={History}>
+    <Router history={browserHistory}>
         {Routes}
     </Router>
 ), document.getElementById('smartadmin-root'));`

Le backend utilise le Phoenix "Cadre de 1519170920" .

Modifier Plus Tard : Voici la version hashHistory qui fonctionne

https://gitlab.com/blockbuster/react-router-2-with-hash-working/tree/master

et voici la version browserHistory qui ne fait pas:

https://gitlab.com/blockbuster/react-router-2-with-browserHistory-not-working/tree/master

le code react pour les deux peut être trouvé dans le répertoire src .

Pour exécuter l'application, vous devez avoir Elixir , Phoenix et Postgresql installés, pour obtenir des dépendances d'arrière-plan( exécuter $ mix deps.get ), obtenir des dépendances de frontend ( npm install et bower install ), pour changer le nom d'utilisateur de base de données et le mot de passe dans config/dev.exs , pour créer et migrer la base de données mix ecto.create && mix ecto.migrate et enfin exécuter mix phoenix.server .

4
demandé sur Community 2016-05-20 23:23:35

2 réponses

avez-vous essayé cette façon dans votre routeur.jsx? 

import React from 'react'
import {render} from 'react-dom'
import { Router, Route, Link, browserHistory, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

import History from '../components/layout/navigation/classes/History.js';

import Routes from './Routes.jsx';

const appHistory = useRouterHistory(createBrowserHistory)({ queryKey: false })

var rootInstance = render((
    <Router history={appHistory}>
        {Routes}
    </Router>
), document.getElementById('smartadmin-root'));
0
répondu Dennis Stücken 2016-05-30 17:10:03

Puisqu'il n'y a pas encore de solution, trouvez ci-dessous ma version de routeur (minimaliste) qui fonctionne pour moi.

dépendances:

  • react@15.1.0
  • react-dom@15.1.0
  • react-router@2.4.0

de l'Histoire.js n'est pas nécessaire explicitement, car il s'agit d'une dépendance du routeur react.

Webpack N'oubliez pas d'ajouter 

devServer: {
    historyApiFallback: true
}

sur votre webpack.config.js, puisque webpack-dev-server pourrait avoir quelques problèmes de routage correctement (principalement en termes de navigation à rebours). 

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, browserHistory} from 'react-router';

import {Routes} from './Routes'; // your routes file

render(
    <Router history={browserHistory}>
        {Routes}
    </Router>,
    document.querySelector('#smartadmin-root')
);

je vous encourage à essayer ce code et à laisser vos trucs de téléchargement. Faites-moi savoir si ça aide et s'il y a des questions. Je suis heureux d'éditer mon post comme nécessaire.

0
répondu Rico Herwig 2016-05-30 18:51:45