javascript - 将 Webpack 与 React-router bundle.js 一起使用未找到

Question

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

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" 有错误。查看错误消息:enter image description here

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

我不知道怎么回事，帮帮我!

Answer 1

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

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

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

如果它与您的 index.html 在同一路径中。

例如。

public/index.html

public/bundle.js

这将解决您的问题。

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