react中的useLoaderData 怎么使用

最新推荐文章于 2024-06-23 09:31:11 发布

мо仙堡杠把子灬

最新推荐文章于 2024-06-23 09:31:11 发布

阅读量836

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43553701/article/details/130680476

版权

useLoaderData是react-router-dom中的一个方法

导入
import {useParams, useNavigate, useLoaderData} from 'react-router-dom';
在 router 中传入一个方法

function noteLoader() {
  return {
    userDocs: [
      {name: '笔记01', filename: 'help.effect.json', tag: JSON.stringify([]), id: -1},
      {name: '笔记02', filename: 'help.effect.json', tag: JSON.stringify([]), id: 1},
      {name: '笔记03', filename: 'help.effect.json', tag: JSON.stringify([]), id: 2}
    ],
  };
};
  const router = createBrowserRouter([
    {
      path: '/',
      element: <LayoutComponent session={session} config={config} pluginManager={pluginManager} />,
      children: [
        {
          path: 'note/:curDocId',
          element: <YinComponent session={session} pluginManager={pluginManager} />,
          loader: noteLoader, // 这个方法
        }
      ]
    }
  ]);