Tepki-yönlendirici v4 - alınamıyor * url *

Question

Reaktif yönlendirici v4'ü kullanmaya başladım. Bazı navigasyon bağlantıları ile app.js'mde basit bir <Router> var (aşağıdaki kod). localhost/vocabulary'a gidersem, yönlendirici beni doğru sayfaya yönlendirir. Ancak, daha sonra yeniden (F5) düğmesine bastığımda (localhost/vocabulary), tüm içerik kaybolur ve tarayıcı raporu Cannot GET /vocabulary. Bu nasıl mümkün olabilir? Birisi bana bunun nasıl çözüleceğine dair herhangi bir ipucu verebilir mi (sayfayı doğru bir şekilde yeniden yükleyin)?

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

Sana WebPack kullandığınız varsayıyorum. Öyleyse, webpack yapılandırmanıza birkaç şey eklemek sorunu çözmelidir. Spesifik olarak, output.publicPath = '/' ve devServer.historyApiFallback = true. Aşağıda, her ikisini de kullanan ve benim için yenileme sorununu düzelten bir örnek web paketi yapılandırması yer almaktadır. "Neden" diye merak ediyorsanız, this yardımcı olacaktır.

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

burada bu konuda daha fazla yazdım - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

Answer 2

Hemen hemen herkes hala bu mücadele için Tyler'ın cevabı tamamlamak için:

(publicPath ayarlamadan) devServer.historyApiFallback: true benim WebPack için yapılandırma ekleme 404 sabit/Yenilemeyen hatalar, yenileme/geri/ileride görüyordum, ancak sadece tek bir yuvalanmış yol seviyesi için. Başka bir deyişle, "/" ve "/ konular" iyi çalışmaya başladı, ancak bunun ötesinde bir şey (ör. "/ Topics/her ne varsa") hala yenileme/etc'de 404 attı.

Sadece kabul edilen cevaba rastladım: Unexpected token < error in react router component ve benim için en son eksik parçayı sağladı.'u, index.html numaralı paketteki bundle komut dosyasına eklemek, sorunu tamamen çözdü.

Answer 3

Aynı sorunu yaşıyordum, ancak webpack'i tekrar çalıştırdıktan ve çalıştırdıktan sonra düzeltildim.

, ben --history-api-fallback eklendi benim webpack build kodun sonuna benim package.json dosyasını düzenleme edilmiş ve scripts: {

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

altında sabit ya bu da en kolay gibi

Answer 4

Ben aynı sorunu yaşıyordu gibiydi Cannot GET /url için numaralı 10 numaralı hatayı düzeltin Not: --history-api-fallback ekledikten sonra bir dahaki sefere oluşturduğunuzda, çıktıda bu gibi görünen bir satır göreceksiniz (dizin dosyanız ne olursa olsun):

404'ler arasında