reactjs - 在单页应用程序中刷新页面

Question

假设您收到一个链接，该链接将您带到来自单页应用程序的页面。您希望能够立即看到该页面（当然，如果您已登录）。

问题是没有从服务器获取数据，所以页面是空的。

哪种做法最适合获取能够正确查看该页面的所有必要数据？基本上，刷新页面时，您希望留在那个地方，而不是被重定向到“/”（例如）。

我考虑制作一个单独的组件来获取所有数据，并在全部完成后呈现页面。但是，它有一个缺点，即在应用程序的正常使用情况下重复获取数据。

Answer 1

使用单页应用程序，您不必自己手动刷新页面。我会考虑在单页应用程序中使用react-router进行导航。此外，当特定视图（React 组件）需要更多数据才能正确显示时，我会利用componentDidMount() 生命周期。您可以在其中使用Axios或浏览器内置的fetch apicomponentDidMount()获取必要的数据。理想情况下，您不应该一次获取整个应用程序，并且您的组件本质上是模块化的。作为如何利用库的一个示例，可以执行以下操作：ReactAxios

1. 安装 axios：

   npm install -S axios yarn add axios

2. componentDidMount()使用生命周期方法为您的反应组件获取必要的数据：

反应组件：

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

希望这会有所帮助！

Answer 2

正如@Nathan 指出的那样，刷新单页应用程序是一种不好的做法。

我建议检查数据变量是否未定义（在受控组件的情况下，道具）并基于该返回一个（以显示页面仍在加载）组件或

例如 if(!this.props) return ; //null 如果你想显示一个 //white-page return ;

希望这可以澄清它！快乐编码！