it-swarm.com.de

Wie kann reaktiver Router mit statischen Assets, HTML5-Modus, Verlaufs-API und verschachtelten Routen funktionieren?

Ich dachte, ich würde anfangen, den React Router zu verstehen, aber ich habe eine neue Wand erreicht, als ich eine Bibliothek hinzufügte, die css für seine Komponenten lädt. Alles funktioniert gut, wenn Sie von zu Hause aus zu der Seite navigieren, die die Komponente enthält. Wenn ich sie jedoch aktualisiere, werden die URLs der Schriftarten beschädigt.

Ich habe einen Zeiger hier und hier gefunden, aber bisher kein Glück. Ist das ein häufiges Problem? Wie kann man damit umgehen?

Ich verwende den Webpack Dev Server mit der Standardkonfiguration, die von yeoman scaffolder erstellt wird.

Die Bibliothek, die ich verwende, ist React Fa , um Symbole anzuzeigen.

Wenn ich meine App auf http: // localhost: 8000/ lade, wird alles gut angezeigt. Dann navigiere ich zu http: // localhost: 8000/customer/ABCD1234/chat und meine Symbole sind in Ordnung. Die Schrift wurde ordnungsgemäß geladen.

Dann aktualisiere ich die Seite und sehe in der Konsole:

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

Was offensichtlich kaputt ist, weil der Kundenteil nicht hier sein sollte ...

Hier ist mein Router soweit:

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 habe auch versucht, einen <base href="/"/> zu meiner index.html hinzuzufügen, aber ich bekomme in der Konsole eine rote Warnung von Nice, daher ist es vielleicht nicht die beste Idee:

Warnung: Automatische Einstellung des Basisnamens mit ist veraltet und wird in der nächsten Hauptversion entfernt. Das Die Semantik von unterscheidet sich geringfügig vom Basisnamen. Bitte Übergeben Sie den Basisnamen explizit in den Optionen an createHistory

20
Sephy

Es hört sich so an, als hätten Sie relative Pfade zu Ihren Assets und Symbolen in Ihrem CSS definiert.

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

versuchen Sie stattdessen einen absoluten Pfad:

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

Da es sich bei React Apps um Anwendungen mit nur einer Seite handelt und Sie Ihre App unter / Eingeben, funktionieren alle URLs einwandfrei, unabhängig von der Seite, zu der Sie navigieren, da sie relativ zu sind die Wurzel, an der du angefangen hast.

Sobald Sie Ihre Seite jedoch auf einem anderen Pfad wie /customer/ABCD Neu laden, werden alle Ihre Assets relativ dazu sein, daher die falsche URL, die Sie in Ihrer Konsole sehen.

Wenn Sie ein Webpack verwenden, können Sie auch versuchen, publicPath in Ihrer Konfigurationsdatei wie folgt festzulegen:

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

Ich habe das gleiche Problem.

  1. Fügen Sie dem Kopf einer Seite, die den HTML-Code des Reakt-Routers enthält, ein <base href="http://whatever">-Tag hinzu

  2. Laden Sie die Seite - history.js gibt 2 Fehler aus. Warnung: Das automatische Einstellen des Basisnamens mit <base href> ist veraltet und wird in der nächsten Hauptversion entfernt. Die Semantik von unterscheidet sich leicht vom Basisnamen. Bitte übergeben Sie den Basisnamen in den Optionen explizit an createHistory

  3. Ändern Sie den Reaktionsrouter-Verlauf, um den Verlauf zu verwenden, bei dem der Verlauf const history = useRouterHistory(createHistory)({ basename: 'http://whatever' }) ist. Dies sollte das Problem beheben (da der Basisname jetzt explizit übergeben wird).

  4. Seite aktualisieren

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 dann die Warnung erneut laden, um zu verschwinden ... __ hoffe, dass dies nützlich ist. 

6
RoyLiou

Ich habe das dank React-Script gelöst: 2+

Sie müssen lediglich eine js-Datei mit dem Namen setupProxy.js erstellen. Diese Datei wird vom Entwicklungsserver geladen. Jetzt haben Sie die vollständige Kontrolle über Ihren 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

Ich habe das Problem gelöst, indem ich die Schriftart-Awesome-CD auf der App-Indexseite geladen habe. Dann ist es in allen Situationen auf allen Routen verfügbar.

0
KyleM