在单页应用程序中刷新页面
Refresh a page in a single page application
假设您收到一个 link 将您从单页应用程序转到一个页面。您希望能够立即看到该页面（当然，如果您已登录）。
问题是没有从服务器获取数据，所以页面是空的。
获取所有必要数据以正确查看该页面的最佳做法是什么？。基本上，当刷新页面时，你希望停留在那个地方，而不是被重定向到“/”（例如）。
我考虑制作一个单独的组件来获取所有数据，并在完成后呈现页面。但是，它有一个缺点，即在正常使用应用程序时会重复获取数据。
对于单页应用程序，您不必自己手动刷新 页面。我会考虑使用 react-router for navigation within your single page application. Furthermore, when a particular view (React Component) needs more data to be properly displayed I would leverage the componentDidMount() lifecycle. Within componentDidMount() you can fetch the necessary data with Axios or with the browser's built in fetch api。理想情况下，您 不应一次获取整个应用程序 ，并且您的 React 组件本质上是模块化的。作为如何利用 Axios 库的示例，可以按照以下方式做一些事情：
安装axios：
npm install -S axios
yarn add axios
使用 componentDidMount() 生命周期方法为你的 React 组件获取必要的数据：
反应组件：
componentDidMount(){
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success: i.e. set your state so you can use your data
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}
希望对您有所帮助！
正如@Nathan 所指出的，刷新单页应用程序是一种不好的做法。
我建议检查数据变量是否未定义（在受控组件、道具的情况下）并基于此 return 组件（以显示页面仍在加载）或
例如如果（！this.props）return； //null 如果你想显示一个
//白页
return;
希望这能说明问题！
编码愉快！
假设您收到一个 link 将您从单页应用程序转到一个页面。您希望能够立即看到该页面（当然，如果您已登录）。
问题是没有从服务器获取数据，所以页面是空的。
获取所有必要数据以正确查看该页面的最佳做法是什么？。基本上，当刷新页面时，你希望停留在那个地方，而不是被重定向到“/”（例如）。
我考虑制作一个单独的组件来获取所有数据，并在完成后呈现页面。但是，它有一个缺点，即在正常使用应用程序时会重复获取数据。
对于单页应用程序，您不必自己手动刷新 页面。我会考虑使用 react-router for navigation within your single page application. Furthermore, when a particular view (React Component) needs more data to be properly displayed I would leverage the componentDidMount() lifecycle. Within componentDidMount() you can fetch the necessary data with Axios or with the browser's built in fetch api。理想情况下，您 不应一次获取整个应用程序 ，并且您的 React 组件本质上是模块化的。作为如何利用 Axios 库的示例，可以按照以下方式做一些事情：
安装axios：
npm install -S axios yarn add axios使用
componentDidMount()生命周期方法为你的 React 组件获取必要的数据：
反应组件：
componentDidMount(){
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success: i.e. set your state so you can use your data
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
}
希望对您有所帮助！
正如@Nathan 所指出的，刷新单页应用程序是一种不好的做法。
我建议检查数据变量是否未定义（在受控组件、道具的情况下）并基于此 return 组件（以显示页面仍在加载）或
例如如果（！this.props）return； //null 如果你想显示一个 //白页 return;
希望这能说明问题！ 编码愉快！