Question

我无法弄清楚为什么在从hashLocation更改为现在使用browserLocation 之后，我可以点击下面的链接导航到（渲染采访）面试，但现在对于某些人来说原因一旦我在面试中（我被重定向到呈现的面试组件），如果我刷新浏览器并尝试再次点击interviews/companies/:companyId当我在同一页面上时，它会改为点击我的页面在我的express.js实现中找不到。

再次，总结了这个：第一次点击我的主要着陆页上的链接，这是<Link>所在的位置..当我第一次加载网站时，当我点击它...它能够访问采访/公司/：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>

最初工作正常。我被发送到/ interview / 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

您需要在网络服务器中添加条目，以便为每个get 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

React-Router从hashLocation更改为browserLocation后中断

1 个答案: