带参数的刷新站点在React.js中不起作用

时间:2016-07-01 10:59:57

标签: reactjs react-router

当我尝试在网址有参数时刷新网站时,我会得到一个空白页。

我的routes.js文件如下:

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage}/>
    <Route path="registration/:id" component={hideIfLoggedIn(Registration)}/>
    <Route path="registration" component={hideIfLoggedIn(Registration)}/>
    <Route path="reset-password" component={PasswordReset} />
    <Route path="portal" component={requireAuth(UserPage)} />
  </Route>
);

当我在http://localhost:8001/registration时,一切都很完美。如果我刷新页面它没有问题。

但问题出在我http://localhost:8001/registration/step-one时。第一次加载它时效果很好,但是当我尝试刷新网站时,我得到一个空白页面。

修改

gulp.task('connect', ['watch'], function () {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true,
        fallback: 'dist/index.html'
    })
});

1 个答案:

答案 0 :(得分:0)

您必须将服务器配置为为任何其他路由提供index html。 浏览器请求/registration/step-one,在此路径中找不到index.html因此失败

使用connect-history-api-fallback。

中间件可以通过NPM获得,并且可以轻松添加。

npm install --save connect-history-api-fallback。 导入库

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());