React-router v4 - không thể GET * url *

Question

Tôi bắt đầu sử dụng bộ phản ứng-bộ định tuyến v4. Tôi có một đơn giản <Router> trong app.js của tôi với một số liên kết điều hướng (xem mã bên dưới). Nếu tôi điều hướng đến localhost/vocabulary, bộ định tuyến sẽ chuyển hướng tôi đến đúng trang. Tuy nhiên, khi tôi nhấn lại (F5) sau đó (localhost/vocabulary), tất cả nội dung sẽ biến mất và báo cáo trình duyệt Cannot GET /vocabulary. Làm thế nào là có thể? Ai đó có thể cho tôi bất kỳ đầu mối làm thế nào để giải quyết điều đó (tải lại trang một cách chính xác)?

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

Tôi giả sử bạn đang sử dụng Webpack. Nếu vậy, thêm một vài điều vào cấu hình webpack của bạn sẽ giải quyết được vấn đề. Cụ thể, output.publicPath = '/' và devServer.historyApiFallback = true. Đây là một cấu hình webpack ví dụ dưới đây sử dụng cả hai^và sửa vấn đề làm mới cho tôi. Nếu bạn tò mò "tại sao", this sẽ giúp ích.

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

tôi đã viết thêm về điều này ở đây - Fixing the "cannot GET /URL" error on refresh with React Router (or how client side routers work)

Answer 2

Chỉ cần bổ sung câu trả lời của Tyler cho bất cứ ai vẫn phải vật lộn với điều này:

Thêm devServer.historyApiFallback: true để webpack của tôi cấu hình (không có thiết publicPath) cố định 404/Không thể-GET lỗi tôi đã nhìn thấy trên refresh/back/forward, nhưng chỉ cho một cấp độ duy nhất của con đường lồng nhau. Nói cách khác, "/" và "/ chủ đề" bắt đầu hoạt động tốt nhưng bất kỳ điều gì ngoài đó (ví dụ: "/ topics/whatever") vẫn ném 404 khi làm mới/v.v.

Chỉ cần xem câu trả lời được chấp nhận tại đây: Unexpected token < error in react router component và nó đã cung cấp phần còn thiếu cuối cùng cho tôi. Thêm / hàng đầu vào tập lệnh bó src trong số index.html của tôi đã giải quyết hoàn toàn vấn đề.

Answer 3

Tôi đã gặp sự cố tương tự nhưng đã được khắc phục sau khi dừng và chạy lại webpack.

Answer 4

Tôi đã có cùng một vấn đề, những gì cố định nó đối với tôi là chỉnh sửa tập tin package.json của tôi, và dưới scripts: {

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

vào cuối của mã webpack build tôi thêm --history-api-fallback này cũng có vẻ như đơn giản nhất giải pháp cho lỗi Cannot GET /url

Lưu ý: lần sau khi bạn xây dựng sau khi thêm --history-api-fallback bạn sẽ thấy một dòng trong đầu ra giống như thế này (với bất kỳ tệp chỉ mục nào của bạn):

404s sẽ dự phòng để /index.html