Geek Answers Handbook

Using Webpack with React-router bundle.js not found

I am creating a project using webpack and react-rounter. this is my 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') );

When I request "http://127.0.0.1:3001/purchase" , it works! but the address "http://127.0.0.1:3001/purchase/a" has an error. look at the error message: enter image description here

My configurator WebpackDevServer:

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

I do not know what is the matter, help me!

+13
source share
3 answers

You use the relative path to describe the bundle.js package path in your index.html.

You must use the absolute path for bundle.js in your index.html

The absolute path contains the root directory and all other subdirectories that contain the file or folder.

If it is in the same path with your index.html.

eg.

public/index.html

public/bundle.js

This will solve your problem.

 <script src="/bundle.js"></script>
+25
source

Adding <base href="/" /> to the tag title of my index.html file before including any scripts worked for me.

+7
source

If you use HtmlWebpackPlugin editing directly index.html , this is not an option. So, to fix this specific problem, add publicPath and specify / as the root folder inside webpack.config.js :

 const path = require('path') module.exports = { entry: './app/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/' }, // more config stuff goes below.. }

Remember to restart the web development server for these changes to take effect.

Read more about publicPath here .

+1
source

More articles:


All Articles