Verwenden von Webpack mit React-router bundle.js Nicht gefunden

Question

Ich baue ein Projekt mit Webpack und react-router. dies ist mein Code:

ReactDOM.render(
 
    <Provider store={store}> 
 
     <Router history={ browserHistory }> 
 
      <Route path='/' component={ App } > 
 
       <IndexRoute component={ Home } /> 
 
       <Route path="purchase" component={ Purchase } /> 
 
       <Route path="purchase/:id" component={ Purchase } /> 
 
      </Route> 
 
     </Router> 
 
    </Provider>, 
 
    document.getElementById('example') 
 
);

Wenn ich "http://127.0.0.1:3001/purchase" beantragen, es ist Arbeit! aber die Adresse "http://127.0.0.1:3001/purchase/a" hat einen Fehler. sehen die Fehlermeldung: enter image description here

Meine WebpackDevServer config:

new WebpackDevServer (webpack(config), { 
 
    publicPath: config.output.publicPath, 
 
    hot: true, 
 
    noInfo: false, 
 
    historyApiFallback: true 
 
}).listen(3001, '127.0.0.1', function (err, result) { 
 
     if (err) { 
 
      console.log(err); 
 
     } 
 
     console.log('Listening at localhost:3001'); 
 
    });

Ich weiß nicht, was los, hilf mir!

Answer 1

Sie verwenden einen relativen Pfad, um den Pfad der bundle.js in Ihrer index.html zu beschreiben.

sollten Sie absoluten Pfad verwenden für bundle.js in Ihrer index.html

Absoluter Pfad enthält das Stammverzeichnis und alle anderen Unterverzeichnisse, in dem eine Datei oder einen Ordner enthalten ist.

Wenn es im gleichen Pfad mit Ihrer index.html ist.

z.

public/index.html

public/bundle.js

Dies würde Ihr Problem lösen.

<script src="/bundle.js"></script>