react 如何实现先加载数据后跳转路由？

[nishavayaZhou]

当用户点击列表中某一条数据时，先请求其对应的数据，等接口返回数据之后，再从列表页进入至详情页。

[ericls]

getData().then(history.push)

[demonzoo]

这。。。你要看你跳转是怎么实现的。
如果是通过 router link 实现的，那需要把 router link 干掉，用 onClick 来实现。onClick 里面先去发 API 获取数据，同时页面置成 loading state ，然后数据回来之后把 loading 取消，然后再用 react-router-dom 的 navigate 方法跳转路由

[nishavayaZhou]

我当前的做法是，拦截所有通过 link 的跳转，请求玩数据之后，将其存储到 context 中，然后再回复路由的跳转。
但是这么实现感觉十分糟糕，需要考虑用户直接进入详情以及用户在历史记录中切换，这样会导致详情会有两个数据来源(一个从 context 中获取，一个直接从服务端获取)。

[bojue]

你这个是做下一个页面的大量数据预加载？如果是获取数据的话跳转完毕加一个 loading 效果

[liiihhhh]

如果用的是 React Router 可以试试
```
let navigate = useNavigate();

const onClick=()=>{

getData().then(data=> navigate("../page", { state: data }) ) ;

}

```

[nishavayaZhou]

我在使用这个网站的时候发现的这个效果 https://filfox.info/，觉得这种先加载数据再跳转路由的功能，比加 loading 效果的用户体验很好。想在我的项目中实现这个功能。
我在 react 的官网上关于 Suspense 描述的内容上也有提及先加载数据在渲染的思想，但是当我使用 Suspense 的时候发发现真的很难用

[wellerman]

这不就是缓存么，把 localStorage 和数据请求封装在一起不就行了么。可以用自定义 hook 。

[gouflv]

这活儿还是用 redux 或者 context 来搞吧，Suspense 可用场景不多

[yimity]

<amp-youtube data-videoid="95B8mnhzoCM" layout="responsive" width="480" height="270"></amp-youtube> 没看过，但是应该满足你的需求，可以看一下。

[zepc007]

SSR 也算一种策略？

[darkengine]

一个思路：用户点击的时候直接跳转，把数据 id 作为参数加到跳转链接里（例如 /book?id=xxxx ），跳转的目标组件解析链接里带的 id 参数，再根据这个参数拉取数据进行渲染。

[ddch1997]

用 react-qeury ，在列表页的时候后台自动拉取对应详情页的数据，等点击详情的时候，详情页拉取的接口就是缓存好的数据，这样不知可不可行