Reactjs PrivateRoute等待响应

我试图让我的privateRoute等待API调用。确定用户是否联机并允许访问该页面。但是我得到了以下错误：

错误：

Error: PrivateRoute(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我想它不是在等待响应来呈现，因为我在等待我的服务器。我如何解决它，让它等待

我这样称呼它：

服务器响应专用路由：

import React from 'react';
import PropTypes from 'prop-types';
import { Route, Navigate } from 'react-router-dom';
import { useNavigate  } from "react-router-dom";
import Login from './components/login/login.jsx';
import GameComponent from './gameComponent.jsx';
import axios from 'axios';

const PrivateRoute = ({ component: Component, redirectTo, isAuth, path, ...props }) => {
    //isAuth = false;
    axios.post(`http://localhost:3000/online`,{withCredentials: true})
      .then(res => {
        console.log(res);
       
       if (res) {
           isAuth = true;
       } else {
           isAuth = false;
       }
       
       
        if(!isAuth) {
            return <Navigate to={redirectTo} />;
        }
        return <Route path={path} element={<Component />} />
        
      });
};

export default PrivateRoute;

从“React”导入React；
从“道具类型”导入道具类型；
从“react router dom”导入{Route，Navigate}；
从“react router dom”导入{useNavigate}；
从“./components/Login/Login.jsx”导入登录名；
从“./GameComponent.jsx”导入GameComponent；
从“axios”导入axios；
const privaterout=（{component:component，redirectTo，isAuth，path，…props}）=>{
//isAuth=false；
轴心柱(`http://localhost:3000/online`，{withCredentials:true}）
。然后（res=>{
控制台日志（res）；
如果（res）{
isAuth=true；
}否则{
isAuth=false；
}
如果（！isAuth）{
返回；
}
返回
});
};
导出默认私有路由；

旧代码：

const PrivateRoute = ({ component: Component, redirectTo, isAuth, path, ...props }) => {
    //isAuth = false;
    // no code checking... or real auth
            if(!isAuth) {
            return <Navigate to={redirectTo} />;
        }
        return <Route path={path} element={<Component />} />
        
};

export default PrivateRoute;

const PrivateRoute=（{component:component，redirectTo，isAuth，path，…props}）=>{
//isAuth=false；
//没有代码检查…或真正的身份验证
如果（！isAuth）{
返回；
}
返回
};
导出默认私有路由；

---

更新：请记住，它必须与React route版本6一起使用

您可以在这里找到我的介绍：（请参阅private.js文件，我为

主题

路由制作了一个私有路由（主题按钮））

您的第一个错误是PrivateRoute组件没有返回任何内容。您必须执行

return axios.post

以返回至少一些内容（这就是产生错误的原因）

然后，由于

axios.post

是一个异步函数，需要一些时间才能解析，因此在PrivateRoute提取时不会呈现任何内容，因此您必须确保PrivateRoute在提取时至少返回一个

加载

组件

if（isload）返回加载

然后在下面的代码中，如果这样更改变量，React将不会做任何事情。（因此它不会对变化做出“反应”）

您必须创建一个如下的钩子函数：let
[isAuth，setIsAuth]=React.useState（false）
，并像下面这样更改变量
setIsAuth（true）
。在我的解决方案中，我为
isAuth
和
isLoading
创建了一个自定义钩子，以获取和设置变量，从而使React能够对它们的更改做出反应，并呈现良好的组件。
我刚刚为路由器v6进行了编辑。它现在应该可以工作了。尝试导入错误：“重定向”未从“react router dom”导出。认为它在路由器V6中有所不同。你是对的，尝试将
重定向
更改为
导航
。我也在codesandbox中更改了它。我更改了
Protected
和
PrivateRoute
函数。现在试一试。还是同样的错误。想在teamviewer上显示不和谐吗？
           isAuth = true;
       } else {
           isAuth = false;
       }