ReactRouterDom，AuthRoute返回react渲染功能无效，因为react子警告

问题描述

“我的路由器”是一个包含公用和专用路由的简单组件。我创建了AuthRoute，它引用了here

中的精彩教程

所以，我的路由器看起来像：

    export const TableResearch = ({setSelectedSuggestion,setimages}) => {
const [research,setResearch] = useState('');
const [suggestions,setSuggestions] = useState ([]);
const [table,setTable]= useState ([]);


const getDataTable = async () => {
  const {data} = await jsonbin.get('/b/5f3d58e44d93991036184474');
  setTable(data);
  console.log(table)
};
getDataTable();

和我的AuthenticationRoute看起来像这样：

    <Router>
      <div>
        <Navigation />
  
        <Route exact path={ROUTES.LANDING} component={Landing} />
        <Route path={ROUTES.SIGN_UP} component={SignUp} />
        <Route path={ROUTES.SIGN_UP_SUCCESS} component={SignUpSuccess} />
        <AuthenticationRoute path={ROUTES.HOME} component={Home} />

      </div>
    </Router>

一切都很好，但是我的控制台返回了这样的警告：

export const AuthenticationRoute = ({ component: Component,...rest }) => {
  
  const [authChecking,setAuthChecking] = useState(true);
  const [{ isAuth },dispatch] = useStateValue();

  useEffect(() => {
    checkLoggedIn().then(res => {
      setAuthChecking(false);
      dispatch({
        op: 'auth',type: 'toggleSessionAuth',toggleSessionAuth: res
      });
    });
  },[])

  if(authChecking)
    return null;

  if(!isAuth) {
    return <Redirect to='/' />;
  }

    return <Route {...rest} render={(props) => (
          <Component {...props} />
      ) 
    } />

}

我曾经尝试过使用组件/渲染器等其他解决方案，但是我找不到该问题的解决方案，也不知道自己在做什么错。

出于测试目的，我尝试呈现简单的Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from the render. Or maybe you meant to call this function rather than return it.而不是呈现Component，并且效果很好。但是，当我在props中传递JSX组件时，它将返回上面显示的警告。

家庭组件（Home.js）的实现

<div>test</div>

有人可以帮我解决这个小问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-router-dom reactjs reactjs