Reactjs React路由器dom保护路由w/async

因此，我有以下路由器：

 <Router>
   <TopBar />
     <Route path="/" exact component={Home} />
     <Route path="/cadastro" exact component={SignUp} />
     <Route path="/login" exact component={Login} />
     <ProtectedRoute path="/perfil/:profileId" auth={props.auth} exact component={Profile} />
   <Footer />
 </Router>

根据

isAuthenticated（）

结果，它决定用户是否访问该页面。我这里的问题是，

isAuthenticated（）

函数向服务器发出验证身份验证令牌的请求，因此它是异步的。我不能只在isAuthenticated函数中放入async/await，因为出现以下错误：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

有人对如何解决这个问题有什么想法吗？我所有的身份验证逻辑都在服务器端，仅仅为了解决这个问题而在客户端保留验证逻辑（对我来说）是没有意义的。

---

谢谢：）

我建议创建如下函数：

function ProtectedRoute({
  component: Component,
  dispatch,
  auth,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
            }}
          />
        )
      }
    />
  );
}

 const renderContent = () => {
        switch (props.auth) {
            case false:
                return (
                    <Switch>
                         <Route path="/" exact component={Home} />
                         <Route path="/cadastro" exact component={SignUp} />
                         <Route path="/login" exact component={Login} />
                         <Redirect to={{ pathname: "/login" }} />
                    </Switch>
                );
            default:
                return (
                    <Switch>
                       <Route path="/" exact component={Home} />
                       <Route path="/cadastro" exact component={SignUp} />
                       <Route path="/login" exact component={Login} />
                       <Route path="/perfil/:profileId" exact component={Profile} />
                       <Redirect to={{ pathname: "/" }} />
                    </Switch>
                );
        }
    };

const renderContent=（）=>{
开关（props.auth）{
案例错误：
返回(
);
违约：
返回(
);
}
};

然后在渲染方法中可以执行以下操作：

 return <div>{renderContent()}</div>;

返回{renderContent（）}；

我建议创建如下函数：

function ProtectedRoute({
  component: Component,
  dispatch,
  auth,
  ...rest
}) {
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
            }}
          />
        )
      }
    />
  );
}

 const renderContent = () => {
        switch (props.auth) {
            case false:
                return (
                    <Switch>
                         <Route path="/" exact component={Home} />
                         <Route path="/cadastro" exact component={SignUp} />
                         <Route path="/login" exact component={Login} />
                         <Redirect to={{ pathname: "/login" }} />
                    </Switch>
                );
            default:
                return (
                    <Switch>
                       <Route path="/" exact component={Home} />
                       <Route path="/cadastro" exact component={SignUp} />
                       <Route path="/login" exact component={Login} />
                       <Route path="/perfil/:profileId" exact component={Profile} />
                       <Redirect to={{ pathname: "/" }} />
                    </Switch>
                );
        }
    };

const renderContent=（）=>{
开关（props.auth）{
案例错误：
返回(
);
违约：
返回(
);
}
};

然后在渲染方法中可以执行以下操作：

 return <div>{renderContent()}</div>;

返回{renderContent（）}；

这项工作非常有效！非常感谢你。只需一个更正，dom要求代码在里面是的，我知道。我通常在App.tsx render中有我的顶级组件，然后在其中渲染一个包含我答案中的代码的。我指定的代码只用于处理路由，但我想我应该在我的答案中包含这一点。这非常有效！非常感谢你。只需一个更正，dom要求代码在里面是的，我知道。我通常在App.tsx render中有我的顶级组件，然后在其中渲染一个包含我答案中的代码的。我指定的代码仅用于处理路由，但我想我应该在回答中包含这一点。