在渲染React应用程序之前，如何预加载数据

Question

我使用React位置库。想要从cookie中获取令牌，如果存在，请将其发送到服务器以检查它是否处于活动状态。我的问题是，无论路线如何，我如何在渲染应用程序之前一次执行此操作？

我尝试过这样的事情，但仅适用于特定路线

    {
        path: '/',
        element: () => import('../pages/Main').then(mod => <mod.default />),
        loader: async () => {
            return {
                user: await fetchResource('user', {}, true)
            };
        }
    },

Answer 1

在app.js中，您可以做这样的事情

const [ready, setReady] = useState(false);
useEffect(()=>{
  // fetch your token and verify
  setReady(true)
  },[]);

return (
  {
    ready ? (
      // Your app components here
    ) : (
       <div> Loading .... </div>
    )
  }
)

Answer 2

您可以使用此代码：

const [text, setText] = useState("")
const [loading, setLoading] = useState();
const fetchdata = () => {
  setLoading(true)
  fetch("youurl is here")
    .then((res) => res.json())
    .then((data) => setText(data.title))
  setLoading(false)
}

在组件中写下条件：

<div className='App'>
  <button onClick={fetchdata}>Fetch Data</button>
  {loading ? <p>loading</p> : <p>{text}</p>}
</div>

当然，您应该使用useeffect挂钩来获取数据