React Router kann die Seite nach der Seitenaktualisierung nicht finden

Question

Meine App zeigt eine Liste von Büchern mit Links zu einer Detailseite des Buches an.

Wenn ich auf dem Home-Komponente, wo das Buch Liste wiedergegeben wird, und klicken Sie auf einen Link zu einem bestimmten Buch zu bekommen, wird geladen die Seite korrekt ...

Aber wenn ich die Seite aktualisieren, gibt es

import { BrowserRouter as Router } from 'react-router-dom' 
import { Switch, Route } from 'react-router-dom' 

class App extends Component { 
    render() { 
     return (
      <div> 
       <MyNavbar/> 
       <div style={{paddingTop: "5rem"}}> 
        <Switch> 
         <Route exact path='/' component={Home}/> 
         <Route path='/book/:id' component={BookPage}/> 
        </Switch> 
       </div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render((
    <Router> 
     <App /> 
    </Router> 
), document.getElementById('root')) 

01: - 404 Seite nicht Fehler

(ich verwende reagieren-Router v4, Knoten v6.11.1, Express v4.15.2)

reagieren Router-Setup gefunden

Das ist mein webpack config:

var webpack = require('webpack') 
var path = require('path') 

module.exports = { 
    entry: { 
     app: './src/app.js' 
    }, 
    output: { 
     filename: 'public/dist/bundle.js', 
     sourceMapFilename: 'public/dist/bundle.map.js' 
    }, 
    devtool: '#source-map', 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       test: /\.js?$/, 
       exclude: /(node_modules)/, 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      }, { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { 
       test: /\.scss$/, 
       use: [ 
        'style-loader', 
        'css-loader', 
        { loader: 'sass-loader', options: { sourceMap: true } } 
       ] 
      }, 
      { 
       test: /\.(png|jpg|)$/, 
       loader: 'url-loader?limit=200000&name=./imgs/[hash].[ext]' 
      } 
     ] 
    }, 
} 

Answer 1

ist dies die doc ~

wenn Sie webpack-dev-server

1. Gebrauch sind, wenn Sie die webpack-dev-server Config auf webpack.config.js

   schreiben Sie sollten diesehinzufügenzu devServer auf Ihrer Webpack-Konfiguration.

   Dies wird index.html zurück, wenn 404.

   devServer: { ... historyApiFallback: true }

2. wenn Sie cli verwenden, tun dies

   webpack-dev-server --history-api-fallback

3. , wenn Sie den Knoten ausdrücken server.js verwenden, finden Sie here

Wenn die Produktion, können Sie die Serverkonfiguration bearbeiten, jede Anfrage machen, kehren index.html, sicher ausschließen, statische Dateien und api requst ~

Es tut uns leid. Ich schreibe das auf dem Handy.