未将Webpack与React-router bundle.js一起使用 [英] Using Webpack with React-router bundle.js Not Found

问题描述

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

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>

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