react中的useLoaderData 怎么使用

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

1. 导入
   import {useParams, useNavigate, useLoaderData} from 'react-router-dom';
2. 在 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, // 这个方法
        }
      ]
    }
  ]);

3. 进入这个页面的时候path调用方法const {userDocs} = useLoaderData();将所需要的数据获取到就可以了