Wie die reagieren, router funktionieren mit statischen Elemente, html5-Modus, history-API und verschachtelte Routen?

Dachte ich, ich beginnen zu verstehen, Reagieren-Router, aber ich traf eine neue Wand, beim hinzufügen einer Bibliothek lädt, die css für deren Komponenten. Funktioniert alles wunderbar, wenn ein navigieren aus meiner Heimat, auf der Seite mit der Komponente, aber wenn ich es aktualisieren, werden die urls der Schriften defekt sind...

Fand ich einige Zeiger hier und hier aber kein Glück so weit. Ist das ein häufiges Problem ? Wie das zu umgehen ?

Ich benutze webpack dev-server mit default-config gebaut von einem yeoman scaffolder.

Die Bibliothek, die ich benutze, ist Reagieren Fa icons anzeigen.

Wenn ich laden Sie meine app auf http://localhost:8000/ alles, was gut zeigt, dann navigiere ich zu http://localhost:8000/customer/ABCD1234/chat und meine icons sind ok. Die Schrift wurde richtig geladen.

Dann habe ich die Seite aktualisieren, und ich sehe in der Konsole :

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

Ist offensichtlich defekt, da der Kunde Teil sollte nicht hier sein...

Hier ist mein router so weit :

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

Ich auch versucht, indem ein <base href="/"/> zu meinem index.html aber ich bekomme eine schöne Warnung in rot in der Konsole, also vielleicht nicht die beste Idee :

Hinweis: die Automatisch-Einstellung wird der Basisname mit ist
veraltet und wird entfernt werden, in der nächsten major release. Die
Semantik sind geringfügig von basename. Bitte
übergeben Sie den Basisnamen explizit in den Optionen createHistory

InformationsquelleAutor Sephy | 2016-04-28
  1. 22

    Es klingt wie Sie haben festgelegt, relative Pfade zu den Vermögenswerten und-Symbole in der CSS.

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

    versuchen Sie stattdessen einen absoluten Pfad:

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

    Wie Reagieren die apps sind single-page-Anwendungen, und geben Sie Ihre app auf / alle urls gehen, um zu funktionieren, egal, die Seite, die Sie navigieren zu, da Sie relativ zu der Wurzel, wo Sie gestartet.

    Aber sobald Sie laden Ihre Seite auf einen anderen Pfad wie /customer/ABCD alle Ihre Vermögenswerte gehen in Bezug auf, daher die falsche url, die Sie sehen in Ihrer Konsole.

    Auch, wenn mit webpack, können Sie versuchen, Ihre publicPath in deiner config-Datei wie folgt:

    ...
output: {
    path: 'assets',
    publicPath: '/'
},
...
    • In der Theorie, ich denke, das würde funktionieren, aber der Vermögenswert in Frage, ist eine schriftart, geladen von font awesome als ich wissen. Und ich kann nicht den Pfad zu ändern, es sei denn, ich Baue font awesome von SCSS auf meiner eigenen, aber ich lose die Vorteile von CDN... Hier ist der CSS : maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/...
    • Wie würden Sie sich mit mehreren verschiedenen Quellen der statischen Elemente. Weil ich denke, dass mein Problem möglicherweise von so etwas wie, dass. Als fontawsome geladen werden, mit einem relativen Pfad, aber meine Bilder kommen aus einem absoluten asset-Pfad, wie Sie erwähnen,...
    • Sie sind mit einfachen CSS-Code in Ihr Projekt oder SASS? Wenn letzteres, würde ich eher font-awesome in meinem Projekt und definieren Sie den Basis-Pfad, als das verwalten mehrerer Vermögenswerte, die die Pfade: fontawesome.io/get-started
    • Ja, ich könnte das tun, aber ich bin völlig tötet die Nützlichkeit von CDNs...
    InformationsquelleAutor hampusohlsson
  2. 6

    I hava eine gleiche problem.

    1. Hinzufügen <base href="http://whatever"> tag, um den Kopf von einer Seite mit reagieren-router-HTML mit dem Standard-browserHistory

    2. Laden der Seite - history.js wird Ausgang 2 Fehler -, Warn -: Automatisch-Einstellung wird der Basisname mit <base href> ist veraltet und wird entfernt werden, in der nächsten major release. Die Semantik sind geringfügig von basename. Bitte geben Sie den Basisnamen der explizit in den Optionen createHistory

    3. Ändern reagieren-router-Geschichte zu nutzen, die Geschichte, wo die Geschichte ist const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }), das sollte das problem beheben (wie der Basisname ist nun ausdrücklich bestanden)

    4. Laden Sie die Seite neu

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

    5/9 update

    In meinem Fall.

    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")
);

    Und laden Sie dann die Warnung verschwindet.
    hoffe, dass dies nützlich ist.

    • Wie ich das wissen in meiner Frage, ich habe bereits versucht habe ich das github-Problem. Für den Willen des seins sicher, ich habe es nochmal versucht per copy & Paste deinen code, ich bekomme die Warnung auch wenn ich Schritt 3 Ihrer Erklärung...
    InformationsquelleAutor RoyLiou
  3. 1

    Ich dies Problem gelöst Dank reagieren-Skript:2+

    Den Sie gerade haben, um eine js-Datei namens setupProxy.js es wird geladen, indem die Entwickler-server. Jetzt haben Sie die vollständige Kontrolle über Ihre 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

    InformationsquelleAutor Zied Hamdi
  4. 0

    Ich löste dies durch das laden von font-awesome cdn auf der app-Startseite. Dann ist es auf allen Routen und in allen Situationen.

    InformationsquelleAutor KyleM
Schreibe einen Kommentar