React路由器从hashLocation改为browserLocation后中断

Question

我不明白为什么在从hashLocation转换到现在使用browserLocation之后，在我能够单击下面的链接导航到(呈现面试)之后，但是现在由于某种原因，当我在面试时(我被重定向到呈现的面试组件)，如果我刷新浏览器，并且在我已经在同一页面上时尝试再次点击interviews/companies/:companyId，它反而会击中我在express.js实现中找不到的页面。

所以，再次，总结这个：当我第一次点击我的主登陆页面的链接，这是<Link> resides..when第一次加载网站时，当我点击那个.它能够点击访谈/公司/:companyId并呈现面试组件。一切都很好，直到你尝试点击刷新，它爆炸了。不知道为什么

server.js

'use strict';

var express = require('express'),
    app = module.exports = express(),
    port = process.env.PORT || 3000,
    path = require('path');

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

app.use(function (req, res) {
    res.send('Sorry, Page Not Found');
});


console.log("port we're about to run on: " + port);

app.listen(port, function () {
    console.log('Ready on port %d', port);
}).on('error', function (err) {
    console.log(err);
});

在我的主登陆页面上，我单击了一个链接，它在我的一个React组件中定义如下：

 <Link to={`/interviews/companies/${company.id}`}
      params={{id: company.id}}
      className="ft-company"
      ref="link">
    {company.name}
</Link>

一开始效果很好。例如，我被派到/访谈/公司/6，它可以很好地呈现我的面试组件。

，这是我的路由定义：

const App = Component({
    render() {
        return (
            <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}>
                <Route path="/">
                    <IndexRoute component={HomePage}/>
                    <Route name="interview" path="interviews/companies/:companyId" component={Interview}/>
                </Route>
                <Route path="/" component={Container}></Route>
            </Router>
        );
    }
})

Answer 1

您需要在get服务器中添加条目，以便为每个get html请求提供index.html服务。

导入库：

var history = require('connect-history-api-fallback');

现在只需要将中间件添加到应用程序中，如下所示：

var connect = require('connect');

var app = connect()
  .use(history())
  .listen(3000);

当然，您也可以用：来使用这个中间件。

var express = require('express');

var app = express();
app.use(history());

https://github.com/bripkens/connect-history-api-fallback