Question

我有一个React单页面应用程序，其中多个路径嵌套在标题组件下：

render(
<Provider store={store}>
  <div>
    <Router history={browserHistory}>
      <Route component={VisibleHeader}>
        <Route path="/" component={VisibleMainLayout} />
        <Route path="poll/:pollId" component={VisiblePollLayout} />
        <Route path="newpoll" component={NewPollLayout} />
        <Route path="login" component={LoginLayout} />
        <Route path="mypolls" component={VisibleMyPollsLayout} />
      </Route>
    </Router>
  </div>
</Provider>,
document.getElementById('react-container')
);

问题在于“poll /：pollId”路线。

如果我先导航到root，然后点击<Link>，那么一切正常。但是，如果我在“轮询/”URL并刷新，或者尝试直接导航到“民意调查/”URL，我会得到一个空白页面。

刷新和直接导航在其他路线上正常工作。

我的线索是：

我可以从我的快速服务器日志记录输出中看到重新加载“/ poll / 5794b84b7969540e1b370233”请求URL“/ poll / 5794b84b7969540e1b370233”然后请求URL“/poll/main.bundle.js”。 “main.bundle.js”是通常在HTML中加载的Webpack包的名称：

<body>
    <div class="container">
        <div id="react-container">
        </div>
    </div>

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

</body>

</html>

当发生这种情况时，服务器会以主视图响应，但这会被视为Webpack包（即它正在寻找js但是会获取HTML）。

然后浏览器控制台显示错误：

Uncaught SyntaxError: Unexpected token <

，浏览器显示空白屏幕。

以下是我的服务器代码片段，如果它有用：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use('/api',  api);
app.use('/auth', auth);
app.use(express.static(__dirname + '/public'));

app.get('*', function(req, res){
  console.log('Request: [GET]', req.originalUrl);
  res.sendFile(__dirname+'/views/main.html');
});

/**
 * Error Handling
 */

app.use(function(req, res, next) {
  console.log('404');
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

app.use(function(err, req, res, next) {
  res.sendStatus(err.status || 500);
});

var port = process.env.PORT || 8080;
app.listen(port,  function () {
  console.log('Node.js listening on port ' + port + '...');
});

整个shebang的现场演示目前是here。

在重新加载时参数无效的反应路由

0 个答案: