嘗試使用有效/無身份驗證重定向時，“對象作為 React 子對象無效”

Question

我有以下處理路由的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的組件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)

Answer 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}/>
};

讓我知道這現在是否有效，或者您有任何其他問題。