it-swarm.com.de

Eine andere (Standalone-) Seite oder statische Datei in einer Website, die mit React erstellt wurde, bereitstellen

Ich habe eine Website mitrea gebaut, die Reakt-Router verwendet. Für eine bestimmte Route möchte ich eine andere Seite oder eine statische Datei bereitstellen, aber da alle Anforderungen an den reagierenden Router weitergeleitet werden, funktioniert sie nicht. 

zum Beispiel 

www.myapp.com/sitemap.xml
www.myapp.com/something.html

^ Diese Verbindung funktioniert beim ersten Mal, aber sobald ich die Website lade, funktioniert sie nicht, da alle Anfragen durch den Reaktorrouter gehen. 

Jede Lösung, damit es immer funktioniert. Vielen Dank.

Bearbeiten

Ich verwende einen Apache-Server, der so konfiguriert ist, dass er alle Anforderungen an index.html umleitet. Ich denke, das ist der Grund für dieses Verhalten. Dies ist meine Konfiguration, aber ich weiß nicht, wie ich das beheben kann.

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_Host}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Update Ich habe die in Antwort vorgeschlagene Lösung versucht. 

meine Routen sehen so aus, für etwas.html lade ich die ServerLoad-Komponente

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/about" component={About} />
    <Route path="something.html" component={ServerLoad} />
    <Route component={NoMatch} />
</Switch>

Ich habe dies in der componentDidMount-Funktion der ServerLoad-Komponente ausgeführt. Aber es geht nicht. 

componentDidMount() {
    window.location.reload(true);
}

More Ich habe dieses Projekt mit create -react-app eingerichtet und über den Express-Server ( wie dieser ) bereitgestellt. Ich bin nicht sicher, ob ich dort einige Einstellungen vornehmen muss, um andere statische Dateien zu speichern.

22
Abhishek

Das sollte funktionieren:

const reload = () => window.location.reload();

<Router>
  // all your routes..
  ...

  // Your special routes..
  <Route path="/sitemap.xml" onEnter={reload} />
  <Route path="/something.html" onEnter={reload} />
</Router>

Ich denke, das sollte ziemlich klar sein, was es bewirkt;)

Aktualisieren: 

wenn dies eine Option ist, können Sie einfach target = "_ blank" Attribut in Ihren <Link> setzen.

IMHO ist dies aus UX-Sicht sogar noch besser, denn wenn diese Routen nicht Teil Ihrer Hauptanwendung sind, kann der Benutzer nach dem Aufrufen dieser special -Seiten den Tab wechseln.

6
webdeb

Es ist ein unerwünschtes Verhalten von ServiceWorker.js. Verwenden Sie den Kommentar unten und ändern Sie ihn in index.js Ihres React-Projekts. Es sollte funktionieren

import { unregister } from './registerServiceWorker';
unregister();

https://github.com/facebookincubator/create-react-app/issues/2715

2
Angelo Giuseppe

Wenn Sie brauchen /terms umleiten zu /terms.html, der folgende Code hat bei mir mit React-Router 3.x funktioniert.

const reload = () => window.location.reload();
<Router>
  <Switch>
    <Route exact path="/" component={Home} />                
    <Route path="/terms.html" render={reload} />
    <Route path="/privacy.html" render={reload} />
    <Route path="/terms" render={() => <Redirect
        to={{
          pathname: "/terms.html"
        }}
      />} 
    />
    <Route path="/privacy" render={() => <Redirect
        to={{
          pathname: "/privacy.html"
        }}
      />} 
    />
  </Switch>
</Router>
0
dsunku

Wenn die Seiten überhaupt nichts mit der Reactjs-App zu tun haben (d. H. Ein anderes Verzeichnis verwenden), können wir sie meines Erachtens mithilfe des folgenden Codes von der Ebene Node=) weiterleiten, damit die Struktur intuitiver wird:

app.use('/url_to_static_pages', express.static('path_to_static_files'));
0
Eric Tan

Verwenden Sie Switch in Kombination mit einer NoMatch-Komponente in Kombination mit der Lösung von webdeb:

<Router>
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/admin" component={Admin} />
      <Route component={NoMatch} />
      <Route onEnter={() => window.location.reload()} />
    </Switch>
  </div>
</Router>

Dies entspricht den Routen, zeigt 404 an, wenn keine gültige Href existiert, und zeigt eine Datei oder etwas an, wenn es eine gültige Href ist.

0
corysimmons