React-Router v4 - kann nicht GET * url *

Question

Ich begann mit Reagieren-Router v4. Ich habe eine einfache <Router> in meiner app.js mit einigen Navigationslinks (siehe Code unten). Wenn ich zu localhost/vocabulary navigiere, leitet der Router mich auf die richtige Seite um. Wenn ich jedoch danach (F5) erneut drücke (localhost/vocabulary), verschwinden alle Inhalte und der Browser meldet sich Cannot GET /vocabulary. Wie ist das möglich? Kann jemand mir einen Hinweis geben, wie man das löst (die Seite richtig laden)?

App.js:

import React from 'react' 
import ReactDOM from 'react-dom' 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' 
import { Switch, Redirect } from 'react-router' 
import Login from './pages/Login' 
import Vocabulary from './pages/Vocabulary' 

const appContainer = document.getElementById('app') 

ReactDOM.render(
    <Router> 
    <div> 
     <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/vocabulary">Vocabulary</Link></li> 
     </ul> 
     <Switch> 
      <Route exact path="/" component={Login} /> 
      <Route exact path="/vocabulary" component={Vocabulary} /> 
     </Switch> 
    </div> 
    </Router>, 
appContainer) 

Answer 1

Ich nehme an, Sie Webpack verwenden. Wenn dies der Fall ist, sollte das Problem durch Hinzufügen einiger Dinge zu Ihrer Webpack-Konfiguration behoben werden. Insbesondere output.publicPath = '/' und devServer.historyApiFallback = true. Hier ist ein Beispiel für eine Webpack-Konfiguration, die beide verwendet^und behebt das Problem der Aktualisierung für mich. Wenn Sie neugierig sind "warum", wird this helfen.

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
}; 

ich mehr über das hier geschrieben - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

Answer 2

Nur Tyler Antwort auf Ergänzung für alle, noch kämpfen mit diesem:

die Config devServer.historyApiFallback: true meiner webpack Hinzufügen (ohne publicPath Einstellung) befestigt, um die 404/Ich bekomme keine Fehler, die ich beim Aktualisieren/Zurück/Weiterleiten sah, aber nur für eine einzelne Ebene der verschachtelten Route. Mit anderen Worten, "/" und "/ topics" funktionierten gut, aber alles darüber hinaus (z. B. "/ topics/was auch immer") warf immer noch einen 404 auf Refresh/etc.

Gerade kam die akzeptierte Antwort hier: Unexpected token < error in react router component und es lieferte das letzte fehlende Stück für mich. Das Hinzufügen des führenden / zu dem Bundle-Skript src in meinem index.html hat das Problem vollständig behoben.

Answer 3

Ich hatte das gleiche Problem, wurde aber behoben, nachdem Webpack wieder gestoppt und ausgeführt wurde.

Answer 4

ich das gleiche Problem haben, was es fest für mich, meine package.json Datei wurde die Bearbeitung und unter scripts: {

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000" 

am Ende meines webpack build Code, den ich --history-api-fallback hat dieses Bild schien auch wie die einfachste Lösung des Cannot GET /url Fehler

Hinweis: das nächste Mal nach --history-api-fallback bauen Hinzufügen Sie eine Zeile in der Ausgabe feststellen, dass (mit dem, was Ihre Index-Datei ist) wie folgt aussieht:

404s Rückfall wird