V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nishavayaZhou
V2EX  ›  React

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

  •  
  •   nishavayaZhou · 2022-06-14 22:55:14 +08:00 · 3383 次点击
    这是一个创建于 653 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    12 条回复    2022-07-14 09:03:22 +08:00
    ericls
        1
    ericls  
       2022-06-14 22:59:14 +08:00 via iPhone
    getData().then(history.push)
    demonzoo
        2
    demonzoo  
       2022-06-14 23:04:41 +08:00
    这。。。你要看你跳转是怎么实现的。
    如果是通过 router link 实现的,那需要把 router link 干掉,用 onClick 来实现。onClick 里面先去发 API 获取数据,同时页面置成 loading state ,然后数据回来之后把 loading 取消,然后再用 react-router-dom 的 navigate 方法跳转路由
    nishavayaZhou
        3
    nishavayaZhou  
    OP
       2022-06-14 23:06:32 +08:00
    我当前的做法是,拦截所有通过 link 的跳转,请求玩数据之后,将其存储到 context 中,然后再回复路由的跳转。
    但是这么实现感觉十分糟糕,需要考虑用户直接进入详情以及用户在历史记录中切换,这样会导致详情会有两个数据来源(一个从 context 中获取,一个直接从服务端获取)。
    bojue
        4
    bojue  
       2022-06-14 23:11:25 +08:00
    你这个是做下一个页面的大量数据预加载?如果是获取数据的话跳转完毕加一个 loading 效果
    liiihhhh
        5
    liiihhhh  
       2022-06-14 23:13:14 +08:00
    如果用的是 React Router 可以试试
    ```
    let navigate = useNavigate();

    const onClick=()=>{

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

    }

    ```
    nishavayaZhou
        6
    nishavayaZhou  
    OP
       2022-06-14 23:22:16 +08:00
    我在使用这个网站的时候发现的这个效果 https://filfox.info/,觉得这种先加载数据再跳转路由的功能,比加 loading 效果的用户体验很好。想在我的项目中实现这个功能。
    我在 react 的官网上关于 Suspense 描述的内容上也有提及先加载数据在渲染的思想,但是当我使用 Suspense 的时候发发现真的很难用
    wellerman
        7
    wellerman  
       2022-06-15 05:10:22 +08:00
    这不就是缓存么,把 localStorage 和数据请求封装在一起不就行了么。可以用自定义 hook 。
    gouflv
        8
    gouflv  
       2022-06-15 08:28:49 +08:00 via iPhone
    这活儿还是用 redux 或者 context 来搞吧,Suspense 可用场景不多
    yimity
        9
    yimity  
       2022-06-15 08:52:27 +08:00
    没看过,但是应该满足你的需求,可以看一下。
    zepc007
        10
    zepc007  
       2022-06-15 17:10:14 +08:00
    SSR 也算一种策略?
    darkengine
        11
    darkengine  
       2022-06-16 09:09:10 +08:00
    一个思路:用户点击的时候直接跳转,把数据 id 作为参数加到跳转链接里(例如 /book?id=xxxx ),跳转的目标组件解析链接里带的 id 参数,再根据这个参数拉取数据进行渲染。
    ddch1997
        12
    ddch1997  
       2022-07-14 09:03:22 +08:00
    用 react-qeury ,在列表页的时候后台自动拉取对应详情页的数据,等点击详情的时候,详情页拉取的接口就是缓存好的数据,这样不知可不可行
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5837 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 06:18 · PVG 14:18 · LAX 23:18 · JFK 02:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.