reactjs - 从 hashLocation 更改为 browserLocation 后 React-Router 损坏

Question

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

再次总结一下:第一次，当我点击我的主登陆页面上的链接时，<Link>驻留..当我第一次加载网站时，当我单击它时...它能够点击 Interviews/companies/: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>

最初工作正常。例如，我被发送到/interviews/companies/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

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

导入库:

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

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

var connect = require('connect');

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

当然你也可以将这个中间件与express一起使用:

var express = require('express');

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

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