未找到带有 React-router bundle.js 的 Webpack

IT技术 javascript reactjs webpack react-router
2021-04-06 04:57:18

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

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"有错误。查看错误消息：在此处输入图像描述

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

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

3个回答

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

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

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

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

例如。

public/index.html

public/bundle.js

这将解决您的问题。

<script src="/bundle.js"></script>
太棒了！我希望我在几个小时前找到了答案：p
2021-05-26 04:57:18
但是我的 index.html 文件中没有 bundle.js，它以某种方式自动插入并带有相对路径。
2021-05-30 04:57:18

<base href="/" />在包含任何对我有用的脚本之前添加到我的 index.html 文件的 head 标记。

@MichaelCox 啊，JS 有时很有趣。总之干杯！
2021-06-08 04:57:18
你不知道我尝试修复我的 webpack 配置多长时间（几天）却发现这 17 个字符甚至与 webpack 无关。谢谢你。
2021-06-15 04:57:18

如果你碰巧使用了HtmlWebpackPlugin直接编辑index.html是不是一种选择。因此，要解决此特定问题，请添加publicPath并指定/为其中的根文件夹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..
}

不要忘记重新启动 webpack 开发服务器以使这些更改生效

关于publicPath 这里的更多信息。

其它你可能感兴趣的问题
上一篇React DnD：避免使用 findDOMNode 下一篇如何在 Link: ReactJS 上使用 onClick 事件？