React-router v4 - cannot GET *url* (Impossible de récupérer l'URL)

Question

J'ai commencé à utiliser react-router v4. J'ai une simple <Router> dans mon app.js avec quelques liens de navigation (voir le code ci-dessous). Si je navigue vers localhost/vocabulary le routeur me redirige vers la bonne page. Cependant, lorsque j'appuie sur reload (F5) après ( localhost/vocabulary ), tout le contenu disparaît et le navigateur rapporte Cannot GET /vocabulary . Comment cela est-il possible ? Quelqu'un peut-il me donner un indice sur la façon de résoudre ce problème (recharger la page correctement) ?

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

Je suppose que vous utilisez Webpack. Si c'est le cas, ajouter quelques éléments à votre configuration webpack devrait résoudre le problème. Plus précisément, output.publicPath = '/' y devServer.historyApiFallback = true . Voici un exemple de configuration de webpack ci-dessous qui utilise les deux et résout le problème de rafraîchissement pour moi. Si vous êtes curieux de savoir "pourquoi", este vous aidera.

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'
    })
  ]
};

J'ai écrit plus sur ce sujet ici - Correction de l'erreur "cannot GET /URL" lors du rafraîchissement avec React Router (ou comment fonctionnent les routeurs côté client)

Answer 2

Juste pour compléter la réponse de Tyler pour tous ceux qui sont encore confrontés à ce problème :

Ajout de la devServer.historyApiFallback: true à ma configuration webpack (sans mettre publicPath ) a corrigé les erreurs 404/Cannot-GET que je voyais sur les rafraîchissements/retours/avances, mais seulement pour un seul niveau de route imbriquée. En d'autres termes, "/" et "/topics" ont commencé à fonctionner correctement, mais tout ce qui se trouvait au-delà (par exemple "/topics/quelque chose") générait toujours une erreur 404 lors des rafraîchissements/etc.

Je viens de tomber sur la réponse acceptée ici : Unexpected token < erreur dans le composant react router et ça a fourni la dernière pièce manquante pour moi. L'ajout de la tête / au paquet script src dans ma index.html a résolu le problème complètement.

Answer 3

J'avais le même problème, ce qui l'a résolu pour moi était d'éditer ma package.json et sous scripts: {

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

à la fin de mon webpack build J'ai ajouté le code --history-api-fallback cela semblait également être la solution la plus simple au problème du Cannot GET /url erreur

Remarque : la prochaine fois que vous construisez après avoir ajouté --history-api-fallback vous remarquerez une ligne dans la sortie qui ressemble à ceci (avec votre fichier d'index) :

Les 404 seront renvoyés vers /index.html.

Answer 4

Si vous utilisez Webpack, vérifiez votre configuration dans la partie de la configuration du serveur pour l'attribut attribut "contentBase". Vous pouvez le définir par cet exemple :

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

Answer 5

J'avais le même problème mais il a été résolu après avoir arrêté et relancé webpack.