Javascript 在App.js中获取数据可以吗？（有条件地渲染视图）

我想了解更多关于设置upp a React应用程序的标准，应该做的和不应该做的

为了有条件地允许用户访问页面或不访问页面，我可以在App.js（甚至index.js？）中获取数据，然后有条件地呈现路由器链接吗

对我来说，在App.js中进行抓取听起来很糟糕，但这可能根本不重要。我想这个想法是，它可能会减慢应用程序的速度，或者降低代码的可读性

有什么想法吗？或者任何我能读到更多关于这个的地方

代码示例可能会有所帮助：

//App.js
import React, { useState } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { useQuery, gql } from '@apollo/client';

import NavBar from './components/NavBar';
import Start from './views/Start';
import Approvals from './views/Approvals';

const GET_USERINFO = gql`
  query {
    userRole {
      canApproveReports
    }
  }
`;

function App() {
  const { data } = useQuery(GET_USERINFO);

  return (
    <Router>
      <NavBar />
      <Route exact path="/" component={start} />
      
                                             // THE GOOD STUFF
      {data?.userRole.CanApproveReports && (
        <Route exact path="/approvals" component={approvals} />
      )}

    </Router>
  );
}

export default App;

//App.js
从“React”导入React，{useState}；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从'@apollo/client'导入{useQuery，gql}；
从“./components/NavBar”导入NavBar；
从“./views/Start”导入开始；
从“/视图/批准”导入批准；
const GET_USERINFO=gql`
质疑{
用户角色{
禁猎区
}
}
`;
函数App（）{
const{data}=useQuery（获取用户信息）；
返回(
//好东西
{data？.userRole.canapproverports&&(
)}
);
}
导出默认应用程序；

您可以在App.js中获取数据，这非常好，在带有空deps数组的useEffect挂钩中使用

useQuery

。

[]

。感谢您的回复！我在React中研究了异步抓取，并偶然发现了查询中的问题。我不知道我可以在useEffect中使用查询？这可能解决了我的很多问题。但是，useQuery中的

数据

必须设置为状态变量？很抱歉，您可以在使用时使用

useQuery

。我对

useLazyQuery

感到困惑，我们通常在useffect钩子内或在单击按钮时使用它