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
.
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'));
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.