当我尝试在网址有参数时刷新网站时,我会得到一个空白页。
我的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'
})
});
答案 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());