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