wake-up-neo.net

Reakt-Router v4 - GET * URL * nicht möglich

Ich begann mit dem Reakt-Router v4. Ich habe in meinen app.js einen einfachen <Router> mit einigen Navigationslinks (siehe Code unten). Wenn ich zu localhost/vocabulary navigiere, leitet mich der Router auf die richtige Seite weiter. Wenn ich jedoch danach erneut auf (F5) drücke (localhost/vocabulary), werden alle Inhalte ausgeblendet und der Browserbericht Cannot GET /vocabulary. Wie ist das möglich? Kann mir jemand eine Ahnung geben, wie ich das lösen kann (lade die Seite richtig)?

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)
javascriptreactjsrouteslocalhostreact-router
39
exoslav

Ich gehe davon aus, dass Sie Webpack verwenden. Wenn dies der Fall ist, könnte das Problem durch Hinzufügen einiger Dinge zu Ihrer Webpack-Konfiguration behoben werden. Insbesondere output.publicPath = '/' und devServer.historyApiFallback = true. Nachfolgend finden Sie eine Beispiel-Webpack-Konfiguration, die sowohl ^ als auch das Aktualisierungsproblem für mich behebt. Wenn Sie neugierig sind "warum", wird das 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 habe hier mehr darüber geschrieben - Fehler beim Aktualisieren mit React Router (oder wie clientseitige Router funktionieren)

113
Tyler McGinnis

Nur um Tylers Antwort für alle zu ergänzen, die noch immer damit kämpfen:

Durch Hinzufügen des devServer.historyApiFallback: true zu meiner Webpack-Konfiguration (ohne Einstellung von publicPath) wurden die 404/Cannot-GET-Fehler behoben, die beim Aktualisieren/Zurück/Vorwärts angezeigt wurden, jedoch nur für eine einzige Ebene verschachtelter Routen. Mit anderen Worten, "/" und "/ topics" funktionierten gut, aber alles, was darüber hinaus ging (z. B. "/ topics/was auch immer"), warf immer noch einen 404 auf Refresh/etc.

Ich habe gerade die akzeptierte Antwort hier gefunden: Unerwarteter Token <Fehler in der Routerkomponente reagieren und es lieferte das letzte fehlende Stück für mich. Das Hinzufügen des führenden / zum Bundleskript src in meinem index.html hat das Problem vollständig gelöst.

12
Will Ashe

Ich hatte das gleiche Problem, was für mich behoben wurde, war die Bearbeitung meiner package.json-Datei 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 webpacks buildcode fügte ich --history-api-fallback.__ hinzu. dies schien auch die einfachste lösung für den Cannot GET /url-fehler

Hinweis: Wenn Sie nach dem Hinzufügen von --history-api-fallback das nächste Mal erstellen, werden Sie eine Zeile in der Ausgabe sehen, die wie folgt aussieht (mit der Indexdatei):

404s werden auf /index.html zurückfallen

3
Jared

Wenn Sie Webpack verwenden, überprüfen Sie Ihre Konfiguration im Rahmen der Serverkonfiguration auf das "ContentBase" -Attribut. Sie können dieses Beispiel festlegen:

devServer: {
    ...
    contentBase: path.join(__dirname, '../')
    ...
}
1
Alex

Wenn Sie Express (nicht Webpack) verwenden, hat dies für mich funktioniert.

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})
0
Marty McGee

Wenn Ihre Anwendung auf einem statischen Dateiserver gehostet wird, müssen Sie a statt a verwenden.

import { HashRouter } from 'react-router-dom'

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
), holder)

https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

0
jsina

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

0
Carlos Aleman

Ich hatte auch Erfolg mit dem Hinzufügen von ... historyApiFallback: true

devServer: {
        contentBase: path.join(__dirname, "public"),
        watchContentBase: true,
        publicPath: "/dist/",
        historyApiFallback: true
    }
0
SheldonO'Reilly