尝试使用有效/无身份验证进行重定向时，“对象作为 React 子项无效”答案

【问题标题】："Objects are not valid as a React child" when trying to redirect with valid/no authentication尝试使用有效/无身份验证进行重定向时，“对象作为 React 子项无效”
【发布时间】：2021-01-03 07:22:15
【问题描述】：

我有以下处理路由的index.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import "./global.css";
import Login from "./pages/Login/Login";
import { Provider } from "react-redux";
import configureStore, { history } from "./store";
import { Route, Switch } from "react-router";
import * as serviceWorker from "./serviceWorker";
import { ConnectedRouter } from "connected-react-router";
import Home from "./pages/Home/Home";
import AuthProvider from "./AuthProvider";
import IsLoggedIn from "./components/auth/IsLoggedIn";
import IsNotLoggedIn from "./components/auth/IsNotLoggedIn";

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <AuthProvider>
      <ConnectedRouter history={history}>
        <Switch>
          <Route exact path="/" component={() => <IsNotLoggedIn component={Login} redirect="/Home"/>}/>
          <Route path="/Login" component={() => <IsNotLoggedIn component={Login} redirect="/Home"/>}/>
          <Route path="/Home" component={() => <IsLoggedIn component={Home} redirect="/Login"/>} />
          <Route render={() => <div>Not Found</div>} />
        </Switch>
      </ConnectedRouter>
    </AuthProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

它被一个名为AuthProvider的组件包围：

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { getAuth } from "./authSlice";

const AuthProvider = (props) => {
  const {dispatch, children} = props;
  console.log(props, "AUTH PROPS");
  useEffect(() => {
      dispatch(getAuth());
  }, []);
  return <>{children}</>;
};

const mapStateToProps = (state) => {
  return state.auth;
};
export default connect(mapStateToProps)(AuthProvider);

这样我们就可以在每次页面加载时检索身份验证详细信息。

现在，如果您查看我的路由，我创建了两个组件来根据身份验证处理重定向：IsLoggedIn 和 IsNotLoggedIn，两者都非常相似。这里是IsLoggedIn：

import React from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router";

const IsLoggedIn = (props) => {
  const { component, auth, redirect } = props;
  if(auth.authenticated) {
      return component;
  }
  return <Redirect to={redirect}/>
};

const mapStateToProps = (state) => {
  return {
    auth: state.auth,
  };
};
export default connect(mapStateToProps)(IsLoggedIn);

当我仅使用其中一条路线Home 对其进行测试时，它运行良好。当我尝试将其添加到其余部分时，如您在上面的代码中所见，我收到以下错误：

×
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName}). If you meant to render a collection of children, use an array instead.
    in IsNotLoggedIn (created by ConnectFunction)
    in ConnectFunction (at src/index.js:23)
    in component (created by Context.Consumer)
    in Route (at src/index.js:23)
    in Switch (at src/index.js:22)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (at src/index.js:21)
    in AuthProvider (created by ConnectFunction)
    in ConnectFunction (at src/index.js:20)
    in Provider (at src/index.js:19)

【问题讨论】：

标签： reactjs redux react-redux react-router

【解决方案1】：

你的问题很可能在这里：

const IsLoggedIn = (props) => {
  const { component, auth, redirect } = props;
  if(auth.authenticated) {
      return component;
  }
  return <Redirect to={redirect}/>
};

您收到一个组件作为 props（组件本身，而不是 react 元素），而不是在 JSX 中呈现它，而是返回它。组件本身是一个对象，你需要渲染它来避免这个错误：

const IsLoggedIn = (props) => {
  // Components need to start with uppercase letters
  const { component: Component, auth, redirect } = props;
  if(auth.authenticated) {
      return <Component />;
  }
  return <Redirect to={redirect}/>
};

让我知道这是否现在有效，或者如果您有任何其他问题。

【讨论】：