Question

我在dev端使用webpack-dev-server进行我的react-redux应用程序和生产，我将所有JS文件捆绑到一个bundle.js中。现在，我创建了一个基本的快速应用程序，并使用以下代码来提供bundle.js和index.html。

server.js

app.use(express.static('app'));

app.get('*', (req, res) => {
res.sendFile(__dirname + "/app/" + "index.html");
});

以下是我的React路由组件：

return (
        <div>
            <Router>
                <div>
                    <Header/>
                    <Route exact path="/" component={Home}/>
                    <Route path="/login" component={Login}/>
                    <Route path="/signup" component={Signup}/>
                    <Route path="/forgetPassword" component={ForgetPassword}/>
                    <Route path="/wallets" component={Wallets}/>
                    <Route path="/orders" component={Orders}/>
                    <Route path="/settings" component={Settings}/>
                    <Route path="/markets" component={MarketsList}/>
                    <Route path="/market/:marketPair" component={MarketDetail}/>
                    <Route path="/resetPassword/:token" component={ResetPassword}/>
                </div>
            </Router>
        </div>
    );

问题出在嵌套路由上。单级路由（如登录和注册）可以正常工作。但是，像/ market /：marketPair和/ resetPassword /：token这样的路由在浏览器控制台上会出现以下错误：

bundle.js:1 Uncaught SyntaxError: Unexpected token <

单击bundle.js时，它将显示我的index.html文件。

有人可以帮忙吗？

Answer 1

这绝对是Did find: /usr/lib/libstdc++.6.dylib: mach-o, but not built for iOS simulator的问题。确保正确捆绑了文件，并且您有一个输出文件夹，其中包含webpack config期望的所有正确文件。如果未在您的HTML div

中配置捆绑包，则运行该webpack可能会启动该捆绑包

检查配置文件中的文件名，div期望的id和名称中的其他不匹配项

Answer 2

我可以看到2个潜在问题：

bundle.js的路径是相对的
快递不知道路线

我不确定如何创建index.html文件以及是否由webpack处理它，但是：

如果从顶级路由bundle.js，/login等正确加载了/signup，但没有通过/resetPassword/:token之类的路由正确加载，则可能是因为该网页试图加载/resetPassword/bundle.js，而不是/bundle.js。

如果是这种情况，请检查index.html中bundle.js资源的路径。

在为express提供bundle.js时如何处理嵌套的React-Router路由？

2 个答案: