我正在使用React-router,当我点击链接按钮时,它工作得很好,但当我刷新我的网页时,它没有加载我想要的东西。
例如,我在localhost/joblist和一切都很好,因为我到达这里按下一个链接。但如果我刷新网页,我会得到:
Cannot GET /joblist
默认情况下,它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist,他们工作得很好。但我不喜欢这种类型的URL,所以试图删除#,我写道:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
这个问题不会发生在localhost/,这个总是返回我想要的。
这个应用程序是单页的,所以/joblist不需要向任何服务器询问任何事情。
我的整个路由器。
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
如果您正在使用“create-react-app”命令,
生成一个React应用程序,然后生成包。json文件需要有一个更改,以在浏览器中正常运行的产品构建React SPA。打开文件包。Json,并添加以下代码段,
"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
这里最重要的部分是“——history- API -fallback”,用于启用历史API回调。
如果使用Spring或任何其他后端API,有时会出现404错误。因此,在这种情况下,您需要在后端有一个控制器,将任何请求(您想要的)转发给index.html文件,由react-router处理。下面演示了一个使用Spring编写的示例控制器。
@Controller
public class ForwardingController {
@RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
public String forward(HttpServletRequest httpServletRequest) {
return "forward:/";
}
}
例如,如果我们取一个后端API REST端点为“abc”(http://localhost:8080/abc/**),任何到达该端点的请求都将重定向到React应用程序(index.html文件),然后React -router将处理它。
我通过修改webpack.config.js文件解决了这个问题。
我的新配置如下:
之前
output: {
path: path.join(__dirname, '/build/static/js'),
filename: 'index.js'
},
devServer: {
port: 3000
}
后
output: {
path: path.join(__dirname, '/build/static/js'),
filename: 'index.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
port: 3000
}