web-dev-qa-db-fra.com

Comment faire en sorte que le routeur de réaction fonctionne avec des actifs statiques, le mode html5, une API d'historique et des routes imbriquées?

Je pensais commencer à comprendre React Router, mais je me suis heurté à un nouveau mur en ajoutant une bibliothèque qui charge le css de ses composants. Tout fonctionne bien lorsque vous naviguez de chez moi à la page contenant le composant, mais lorsque je l'actualise, les URL des polices sont rompues ...

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

J'utilise webpack dev server avec une configuration par défaut construite par un yeoman scaffolder .

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

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

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

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

Ce qui est évidemment cassé parce que la partie client ne devrait pas être ici ...

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 aussi essayé d'ajouter un <base href="/"/> à mon index.html, mais un avertissement Nice apparaît en rouge dans la console. Ce n'est peut-être pas la meilleure idée:

Avertissement: La définition automatique du nom de base par défaut est obsolète et sera supprimé dans la prochaine version majeure. Le la sémantique de est légèrement différente de basename. S'il vous plaît passer le nom de base explicitement dans les options de createHistory

javascripthtml5reactjsreact-router
20
Sephy

J'ai le même problème.

  1. Ajouter une balise <base href="http://whatever"> à l'en-tête d'une page contenant le code HTML de react-router à l'aide de browserHistory par défaut

  2. Chargez la page - history.js génèrera 2 erreurs. Avertissement: La définition automatique de nom_base à l'aide de <base href> est obsolète et sera supprimée dans la prochaine version majeure. La sémantique de est légèrement différente de basename. S'il vous plaît passer le nom de base explicitement dans les options pour createHistory

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

  4. Recharge la page

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

5/9 mise à jour

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 rechargez l'avertissement pour disparaître . Espérons que cela est utile. 

6
RoyLiou

J'ai résolu ce problème grâce à react-script: 2+

Vous devez juste créer un fichier js appelé setupProxy.js, il sera chargé par le serveur de développement. Maintenant, vous avez le contrôle complet de votre proxy:

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
    console.log("configuring development proxies to point to localhost:4000")
    app.use(proxy('/api', { target: 'http://localhost:4000/' }));
    app.use(proxy('/graphql', { target: 'http://localhost:4000/' }));
};

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually

1
Zied Hamdi

J'ai résolu ce problème en chargeant la police géniale cdn sur la page d'index de l'application. Ensuite, il est disponible sur tous les itinéraires dans toutes les situations.

0
KyleM