React 错误，当我在孩子中使用 Redux 连接时发生，如何绕过？对象作为 React 孩子无效

Question

Here is an Error:

Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent}). If you meant to render a collection of children, use an array instead.

It works just fine if I don't use connect in main.js and using connect in App.js doesn't make an Error, but once I use connect in main.js it throws me this error. What do I do wrong? And I'm using connect same way as in App.js Thank you

Here is sandBox https://codesandbox.io/s/busy-euler-7mpi7?file=/src/main.js

you can experience, just delete connect in main.js and it will start working

App.js

import React, { useEffect } from "react";
import './styles/main.scss';
import './App.scss';

import routes from "./router/router";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";

import {checkUser, fetchUsers, fetchPolls} from "./store/index";


function App (props) {
    useEffect(() => {
        let { loadUsers} = props
        loadUsers();
    }, [])

    let jsxRoutes = routes.map(el =>
        <Route
            path={el.url}
            exact={el.exact}
            key={el.url}>
            { el.component }
        </Route>
            )
    return (
            <Router>
                <div className="App">
                    <Switch>
                        { jsxRoutes }
                    </Switch>
                </div>
            </Router>
    );
}

const mapStateToProps = state => {
    return {
        users: state.users.data,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadUsers: () => dispatch(fetchUsers())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Main.js

import React from "react";
import "./main.scss"

import { connect } from "react-redux"


const Main = (props) => {
    return(
        <main>
            main pg
        </main>
    )
}



export default connect(null, null)(Main);

Answer 1

In App.js try this instead:

let jsxRoutes = routes.map((el) => (
  <Route path={el.url} exact={el.exact} key={el.url} component={el.component} />
));

Or the shorter version: <Route {...el} />