刷新页面在react-router 2中给出了不能GET / page_url

时间:2016-03-21 21:22:58

标签: javascript reactjs react-router

我正在使用客户端渲染反应0.14和react-router 2.我已将我的应用程序部署到本地节点服务器。

我在url (server_url/component1)。当我刷新页面时,我正在

Cannot GET /component1 
来自服务器端的

错误。

我知道这种情况正在发生,因为我再次向服务器发送请求/component1服务器上不存在哪条路由。但是我想在每次刷新页面时禁用它,它应该仅由客户端路由处理。我不想向服务器发送任何请求。

我的应用程序index.js的入口点

import React from 'react';
import ReactDOM from 'react-dom';
import {Router,browserHistory} from 'react-router';
import routes from './routes';

ReactDOM.render(
    <Router routes={routes} history={browserHistory}/>
  , document.querySelector('.init')
);

我的routes.js文件

module.exports = (
       <Route path="/" component={App}>
           <IndexRoute component={Home}/>
           <Route path="/component1" component={comp1}/>
       </Route>
)

修改 在这种情况下,我应该使用浏览器历史记录还是哈希历它们一样吗?

1 个答案:

答案 0 :(得分:1)

如果我理解正确,那么您必须将所有与定义路线不匹配的请求重定向到前端。如果它只是一个静态html文件,则路径应如下所示:

app.get('*', function(req, res) {
    res.sendFile('public/index.html');
});

<强>更新

为了让其他路线正常工作,您应该将它们放在捕捉路线前面,因为快递应用反之亦然(第一个定义的路线将作为最后一个应用):

app.get('/any_route_here', (req, res) => {
  res.json({msg: 'ROUTE WORKS'})
});

app.get('*', (req, res) => {
  res.sendFile('public/index.html'); //pas routing to react
});

通过这种方式,如果您点击了yourserver.host/any_route_here之类的请求,您将收到一条json消息 ROUTE WORKS ,但在任何其他请求中,路由将被传递到您的前端