Reagieren Router v4, kann nicht in Route

Question

Ich versuche, Reagieren Router v4 zu verwenden. Die Version, die ich verwende, ist 4.1.1. Wenn die Seite geladen wird Die Home-Komponente wird so gerendert, wie sie sollte. Aber wenn ich zu localhost:8080/about oder localhost:8080/test2 navigieren, erhalte ich diese im Browser

Cannot GET /about 

Meine App.jsx Datei:

import React from 'react'; 
import { BrowserRouter, Route, Link } from 'react-router-dom'; 

import Home from '../components/Home.jsx'; 
import Test from '../components/Test.jsx'; 

const Test2 =() => (
    <div>test2 component</div> 
); 

const App = (props) => (
    <BrowserRouter> 
    <div className="container-fluid"> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={Test} /> 
     <Route path="/test2" render={Test2} /> 
    </div> 
    </BrowserRouter> 
) 
export default App; 

Webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './client/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './client/index.js' 
    ], 
    output: { 
    path: __dirname + '/dist', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules/'}, 
     { test: /\.jsx$/, loader: 'babel-loader', exclude: '/node_modules/'} 
    ] 
    }, 
    plugins: [HtmlWebpackPluginConfig], 
    devServer: { 
    contentBase: './dist', 
    historyApiFallback: true, 
    } 
}; 

Answer 1

Versuchen Hinzufügen output.publicPath = '/' auf Ihre Konfiguration. Hier ist ein Beispiel für eine Webpack-Konfiguration, die^verwendet und das Aktualisierungsproblem für mich behebt. Wenn Sie neugierig sind "warum", wird this helfen.

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