未找到带有 React-router bundle.js 的 Webpack [英] Using Webpack with React-router bundle.js Not Found

问题描述

我用 Webpack 和 react-rounder 构建了一个项目.这是我的代码:

I build a project with 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')
);

当我请求 "http://127.0.0.1:3001/purchase" 时，它起作用了！但是地址 "http://127.0.0.1:3001/purchase/a" 有错误.查看错误信息:在此处输入图片描述

When i request "http://127.0.0.1:3001/purchase", it's work! but the address "http://127.0.0.1:3001/purchase/a" has error. look the error message:enter image description here

我的 WebpackDevServer 配置是:

My WebpackDevServer config is:

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 don't know what the matter, Help me!

推荐答案

您正在使用相对路径来描述 index.html 中 bundle.js 的路径.

You are using a relative path to describe path of the bundle.js in your index.html.

您应该在 index.html 中为 bundle.js 使用绝对路径

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

绝对路径包含根目录和包含文件或文件夹的所有其他子目录.

Absolute path contains the root directory and all other subdirectories in which a file or folder is contained.

如果它与您的 index.html 位于同一路径中.

If it's in the same path with your index.html.

例如

public/index.html

public/bundle.js

这将解决您的问题.

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

这篇关于未找到带有 React-router bundle.js 的 Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！