React-router v4 – kan *url* niet KRIJGEN

Ik begon react-router v4 te gebruiken. Ik heb een eenvoudige <Router>in mijn app.js met enkele navigatielinks (zie onderstaande code). Als ik naar localhost/vocabularynavigeer, leidt de router me door naar de juiste pagina. Echter, wanneer ik daarna op herladen (F5) druk (localhost/vocabulary), verdwijnt alle inhoud en geeft browser Cannot GET /vocabularyniet weer. Hoe is dat mogelijk? Kan iemand me enig idee geven hoe ik dat kan oplossen (de pagina correct herladen)?

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)

Antwoord 1, autoriteit 100%

Ik neem aan dat je Webpack gebruikt. Als dat het geval is, zou het probleem moeten worden opgelost door een paar dingen aan uw webpack-configuratie toe te voegen. In het bijzonder output.publicPath = '/'en devServer.historyApiFallback = true. Hier is een voorbeeld van een webpack-configuratie hieronder die beide ^ gebruikt en het verversingsprobleem voor mij oplost. Als je nieuwsgierig bent naar “waarom”, ditzal helpen.

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

Ik heb hier meer over geschreven – De “cannot GET /URL” repareren fout bij vernieuwen met React Router (of hoe routers aan de clientzijde werken)

Antwoord 2, autoriteit 6%

Om het antwoord van Tyler aan te vullen voor iedereen die hier nog steeds mee worstelt:

Het toevoegen van de devServer.historyApiFallback: trueaan mijn webpack-configuratie (zonder publicPathin te stellen) loste de 404/Cannot-GET-fouten op die ik zag bij vernieuwen/terug/vooruit , maar alleen voor een geneste route op één niveau. Met andere woorden, “/” en “/topics” begonnen goed te werken, maar alles daarbuiten (bijv. “/topics/whatever”) gooide nog steeds een 404 bij refresh/etc.

Ik kwam hier zojuist het geaccepteerde antwoord tegen: Onverwachte token < fout in react router componenten het leverde het laatste ontbrekende stuk voor mij op. Het toevoegen van de leidende /aan het bundelscript src in mijn index.htmlheeft het probleem volledig opgelost.

Antwoord 3, autoriteit 3%

Het werkte voor mij, ik hoef alleen maar devServer { historyApiFallback: true }toe te voegen is OK, niet nodig om publicPath: '/'

te gebruiken

gebruik zoals:

 devServer: {
    historyApiFallback: true
  },

Antwoord 4, autoriteit 3%

Als uw toepassing wordt gehost op een statische bestandsserver, moet u een gebruiken in plaats van een .

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

Antwoord 5

Ik had hetzelfde probleem, wat het voor mij oploste was het bewerken van mijn package.json-bestand en onder scripts: {

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

aan het einde van mijn webpack buildcode heb ik --history-api-fallbacktoegevoegd
dit leek ook de gemakkelijkste oplossing voor de fout Cannot GET /url

Opmerking: de volgende keer dat u bouwt nadat u --history-api-fallbackheeft toegevoegd, ziet u een regel in de uitvoer die er als volgt uitziet (met wat uw indexbestand ook is):

404s zullen terugvallen op /index.html

Antwoord 6

Als je Express gebruikt (niet Webpack), werkte dit voor mij..

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

Antwoord 7

Ik had hier ook succes mee door toe te voegen … historyApiFallback: true

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

Antwoord 8

Als u Webpack gebruikt, controleer dan uw configuratie in een deel van de serverconfiguratie voor de
“contentBase”-kenmerk. U kunt dit voorbeeld instellen:

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

Antwoord 9

Toevoegen aan het geaccepteerde antwoord, als je de HtmlWebpackPlugingebruikt en nog steeds fouten krijgt, controleer dan de eigenschap filename. Als u de filenamespecifiek voor productie instelt, moet u een voorwaarde toevoegen om de filenameafhankelijk te maken van de variabele WEBPACK_DEV_SERVER. Zie het onderstaande voorbeeld:

new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: process.env.WEBPACK_DEV_SERVER ? 'index.html' : PROD_HTML_PATH,
})