react-router-dom 中loader的使用

简介：

        在react路由中可以设定一个loader函数，该函数执行在路由进入之前，因此可以通过在该函数中请求数据实现页面信息的初识化，除此之外还能通过loader函数进行路由之间的数据传输。

配置：

      在路由配置中做以下修改:

    const config: RouteObject[] = [        
        {
           path: "music_play/:id", //这里 "/:变量名称" 是要传递的数据
           loader: music_play_loader,  //loader中所要执行的函数。
           element: <MusicPlay />,
           errorElement: <ErorFailePage />
        }
    ]

         其中 music_play_loader 函数如下

export async function music_play_loader(parms: any) {
  const music = (await getMusicPlay(parms.params)).data.data[0];
  return music ;
}

         其中parms是在path中所配置的数据项。在这里也就是 {id:xxx}。

使用：

      1.发送

        在页面组件中通过Link 或 NavLink 组件进行跳转时，在路径的末尾加上所传的数据即可。

  <Link to={`/music_play/1}`}> //这里的 1 就是id的值
    music_play
  </Link>

        此外也可以通过 useNavigate 跳转和发送数据

  const navigate = useNavigate();

  navigate("/music_play/1");

       2.接收

       数据的接收需要通过useLoaderData，使用很简单直接导入调用就行。

const data: any = useLoaderData();

        其中data就是所接收的数据。