这是一个创建于 1234 天前的主题，其中的信息可能已经有所发展或是发生改变。
当用户点击列表中某一条数据时，先请求其对应的数据，等接口返回数据之后，再从列表页进入至详情页。
 |
1
ericls 2022-06-14 22:59:14 +08:00 via iPhone
getData().then(history.push)
|
 |
2
demonzoo 2022-06-14 23:04:41 +08:00
这。。。你要看你跳转是怎么实现的。
如果是通过 router link 实现的，那需要把 router link 干掉，用 onClick 来实现。onClick 里面先去发 API 获取数据，同时页面置成 loading state ，然后数据回来之后把 loading 取消，然后再用 react-router-dom 的 navigate 方法跳转路由 |
 |
3
nishavayaZhou OP 我当前的做法是，拦截所有通过 link 的跳转，请求玩数据之后，将其存储到 context 中，然后再回复路由的跳转。
但是这么实现感觉十分糟糕，需要考虑用户直接进入详情以及用户在历史记录中切换，这样会导致详情会有两个数据来源(一个从 context 中获取，一个直接从服务端获取)。 |
 |
4
bojue 2022-06-14 23:11:25 +08:00
你这个是做下一个页面的大量数据预加载？如果是获取数据的话跳转完毕加一个 loading 效果
|
 |
5
liiihhhh 2022-06-14 23:13:14 +08:00
如果用的是 React Router 可以试试
``` let navigate = useNavigate(); const onClick=()=>{ getData().then(data=> navigate("../page", { state: data }) ) ; } ``` |
|
6
nishavayaZhou OP 我在使用这个网站的时候发现的这个效果 https://filfox.info/，觉得这种先加载数据再跳转路由的功能，比加 loading 效果的用户体验很好。想在我的项目中实现这个功能。
我在 react 的官网上关于 Suspense 描述的内容上也有提及先加载数据在渲染的思想，但是当我使用 Suspense 的时候发发现真的很难用 |
 |
7
wellerman 2022-06-15 05:10:22 +08:00
这不就是缓存么，把 localStorage 和数据请求封装在一起不就行了么。可以用自定义 hook 。
|
 |
8
gouflv 2022-06-15 08:28:49 +08:00 via iPhone
这活儿还是用 redux 或者 context 来搞吧，Suspense 可用场景不多
|
 |
9
yimity 2022-06-15 08:52:27 +08:00
没看过，但是应该满足你的需求，可以看一下。
|
 |
10
zepc007 2022-06-15 17:10:14 +08:00
SSR 也算一种策略？
|
 |
11
darkengine 2022-06-16 09:09:10 +08:00
一个思路：用户点击的时候直接跳转，把数据 id 作为参数加到跳转链接里（例如 /book?id=xxxx ），跳转的目标组件解析链接里带的 id 参数，再根据这个参数拉取数据进行渲染。
|
 |
12
ddch1997 2022-07-14 09:03:22 +08:00
用 react-qeury ，在列表页的时候后台自动拉取对应详情页的数据，等点击详情的时候，详情页拉取的接口就是缓存好的数据，这样不知可不可行
|
Select Language