Javascript Girl
  1. Javascript Girl
  3. Comment faire fonctionner le routeur réactif avec les actifs statiques, le mode html5, l'API historique et les routes imbriquées?
Intereting Posts
Accédez aux variables Java / Servlet / JSP / JSTL / EL en JavaScript ContentEditable dans Shadow DOM? Commutateur JavaScript avec opérateurs logiques? Le service de jasmine AngularJS se moque Comment enregistrer une image dans Parse.com via JavaScript? Comment résoudre _.some en utilisant _.every? Comment déclencher une extension Chrome, un script de contenu pour un hachage donné dans l'URL? Puis-je obtenir de l'image à partir d'un élément de toile et l'utiliser dans la balise src img? Obtenir des paramètres d'URL à partir de l'URL actuelle en utilisant Prototype JavaScript Comment éviter le codage dur? Dans les décorateurs Afficher un deuxième menu déroulant en fonction de la sélection déroulante précédente Existe-t-il des différences entre .then (functionReference) et .then (function (value) {return functionReference (value)})? L'utilisateur clique sur le lien dans le courrier électronique, il ouvre le client de messagerie, comment fermer la fenêtre / onglet? Comment mesurer le temps d'exécution d'un script? Sécurisation des clés API du site Web dans les extensions Chrome

Comment faire fonctionner le routeur réactif avec les actifs statiques, le mode html5, l'API historique et les routes imbriquées?

Je pensais que je commençais à comprendre React Router, mais j'ai frappé un nouveau mur lors de l'ajout d'une bibliothèque qui charge css pour ses composants. Tout fonctionne bien lorsqu'un naviguer de ma maison, vers la page contenant le composant, mais quand je le rafraîchit, les URL des polices sont brisées …

J'ai trouvé un pointeur ici et ici, mais pas de chance jusqu'à présent. Est-ce un problème commun ? Comment le contourner?

J'utilise le serveur de développement webpack avec la configuration par défaut construite par un écaillisseur Yeoman .

La bibliothèque que j'utilise est React Fa pour afficher les icônes.

Lorsque je charge mon application sur http: // localhost: 8000 / tout s'affiche bien, puis je navigue vers http: // localhost: 8000 / customer / ABCD1234 / chat et mes icônes sont correctes. La police a été correctement chargée.

Ensuite, je rafraîchis la page, et je vois dans la console:

DOMLazyTree.js? 019b: 56 GET http: // localhost: 8000 / client / ABCD1234 / assets / 926c93d201fe51c8f351e858468980c3.woff2

Ce qui est évidemment brisé parce que la partie client ne devrait pas être là …

Voici mon routeur jusqu'à présent: 

ReactDOM.render( <Router history={browserHistory}> <Route path='/' component={App}> <IndexRoute component={Index}/> <Route path='customer/:id' component={Customer} /> <Route path='customer/:id/chat' component={CustomerChat}/> <Route path="*" component={ NotFound } /> </Route> </Router> , document.getElementById('support-app'));

J'ai également essayé d'ajouter un <base href="/"/> à mon index.html, mais je reçois un bon avertissement en rouge dans la console, alors peut-être pas la meilleure idée:

Avertissement: le paramétrage automatique du nom de base est obsolète et sera supprimé dans la prochaine version majeure. La sémantique est subtilement différente de basename. Passez le nom de base explicitement dans les options pour créerHistory

Il semble que vous ayez défini des chemins relatifs à vos biens et icônes dans votre CSS.

background-image: url('assets/image/myicon.png')

À la place, essayez un chemin absolu:

background-image: url('/assets/image/myicon.png')

Comme les applications React sont des applications de page unique, et vous entrez votre application sur / , toutes les URL fonctionnent bien, peu importe la page vers laquelle vous naviguez, car elles sont relatives à la racine où vous avez commencé.

Mais dès que vous rechargez votre page sur un chemin différent tel que /customer/ABCD tous vos actifs seront relatifs à cela, d'où la mauvaise URL que vous voyez dans votre console.

De plus, si vous utilisez le logiciel Webpack, vous pouvez essayer de configurer votre publicPath dans votre fichier de configuration comme ceci: 

 ... output: { path: 'assets', publicPath: '/' }, ...

J'ai le même problème.

  1. Ajoutez une <base href="http://whatever"> à la tête d'une page contenant le HTML du routeur réactif en utilisant le navigateur par défautHistory

  2. Charger la page – history.js affichera 2 erreurs, Attention: la définition automatique de basename en utilisant <base href> est obsolète et sera supprimée dans la prochaine version majeure. La sémantique est subtilement différente de basename. Passez le nom de base explicitement dans les options pour créerHistory

  3. Modifiez l'historique du réacteur-routeur pour utiliser l'historique où l'historique est l'histoire de const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }) , qui devrait résoudre le problème (comme le nom de base est maintenant explicitement adopté)

  4. Rechargez la page

https://github.com/reactjs/react-router/issues/3387

Mise à jour 5/9

Dans mon cas.

Index.html 

 <head> <base href="/" /> <script src="app.js"></script> </head> <body> <div id="app"> </div> </body>

App.js 

 import { Router , useRouterHistory } from 'react-router' import { createHistory } from 'history' const browserHistory = useRouterHistory(createHistory)({ basename: '/' }) render( <Router routes={routes} history={browserHistory}/>, document.getElementById("app") );

Et puis recharger l'avertissement pour disparaître. J'espère que cela est utile.