2017-08-29 3 views
1

Dies ist das erste Mal, dass ich versucht habe zu reagieren. Ich erstelle ein Projekt mit create-react-app, dann zum Routing, verwende ich React Router V4 für Web react-router-dom.react-router-dom BrowserRouter funktioniert nach dem Build nicht

Das ist meine index.js Datei

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router } from 'react-router-dom'; 
import App from './App'; 
import './index.css'; 

ReactDOM.render(
    <Router> 
    <App /> 
    </Router>, 
    document.getElementById('root') 
); 

Es gibt kein Problem, wenn ich den Server mit npm start starten. Aber wenn ich die App mit npm run build baue, sie in meinen www Ordner auf meinem Apache Server setze und darauf zugreife, bekomme ich nur eine leere Seite mit <!-- react-empty: 1 --> in meinem root div.

<div id="root"> 
    <!-- react-empty: 1 --> 
</div> 

Ich habe versucht, für Ähnliche Fälle suchen, aber die Antwort immer über das Hinzufügen von historyApiFallback in webpack.config.js oder schlucken, was ich nicht überall in der create-react-app Vorlage finden.

Ich habe versucht HashRouter, es funktioniert gut, aber es gibt /#/ in der URL, die unerwünscht ist.

Wie kann ich den BrowserRouter funktionieren lassen, nachdem ich die App erstellt habe?

+0

Können Sie das Github Repo teilen? Nur so können Sie Ihren Code überprüfen. Hatte dieses Problem nie mit create-react-app und react-router v4, also muss etwas auf Ihrer Seite liegen. – Win

+0

Sorry für die späte Antwort, das ist mein GitHub Repo. https://github.com/fadeltd/mall-app –

+0

das Problem liegt darin, wie Sie die Seite bedienen. wenn Sie mit etwas wie "localhost/myproject" darauf zugreifen. dann wird angenommen, dass die Route gerendert werden muss, ist die Route mit 'myproject' Pfad, also fügt Präfix hinzu, wenn dies der Fall ist –

Antwort

0

Nun, es gab überhaupt kein Problem. Es funktionierte, selbst wenn es unter Verwendung npm run build gebaut wurde. Meine beste Vermutung ist: Sie haben die Dateien in den falschen Ordner gelegt.

Wenn Sie Ihren Code mit npm run build erstellen, sollte der Ordner static in den Ordner MallApp platziert werden. So Ihre Ordnerstruktur wie folgt sein sollte: Browser

/var/www/mywebfolder/index.html 
/var/www/mywebfolder/MallApp/static 

prüfen Konsole, ich glaube, es Fehler enthält. Fehler beim Abrufen der js und css Dateien.

+0

nein. alles gut geladen. Konsole leer. https://www.dropbox.com/sh/2anki8hncblooq6/AACySxivCMakTdH5-SW8KRQ3a –

+0

Nur eine Möglichkeit: Ihr Browser hat HTML5 History API Problem. Weil es vom BrowserRouter benötigt wird. Was Ihre Frage bezüglich der Webpack-Konfiguration betrifft, müssen Sie 'npm run eject' ausführen. Es wird alle Konfigurationsdateien in Ihren Projektordner "extrahieren". Es ist jedoch eine einseitige Operation, also wenn Sie nicht verstehen, wie man babel, webpack, lint, etc ... verwendet, machen Sie das nicht. – Win

Verwandte Themen