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?
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
Sorry für die späte Antwort, das ist mein GitHub Repo. https://github.com/fadeltd/mall-app –
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 –