Wrapping a React Route render component in a HOC - react-router

Question

I wrapped the Profile component in a HOC that is supposed to redirect the user to certain page once he logs out while in this route, like so :
<Route
path="/profile/:username"
render={props=> withAuth(<Profile currentUser={currentUser} {...props} />)}
/>
I get this Error:
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.
this is My HOC:
import React, { Component } from "react";
import { connect } from "react-redux";
export default function withAuth(ComponentToBeRendered) {
class Authenticate extends Component {
componentDidMount() {
if (this.props.isAuthenticated === false) {
this.props.history.push("/signin");
}
}
componentWillUpdate(nextProps) {
if (nextProps.isAuthenticated === false) {
this.props.history.push("/signin");
}
}
render() {
return ComponentToBeRendered ;
}
}
function mapStateToProps(state) {
return {
isAuthenticated: state.currentUser.isAuthenticated
}
}
return connect(mapStateToProps)(Authenticate);
}
This is My Profile Component:
import MessageList from "../containers/MessageList";
import UserAside from "./UserAside";
import { connect } from 'react-redux';
import { selectTheUser } from '../store/selectors'
const Profile = props => {
return (
<div className="row">
<MessageList {...props} />
<UserAside
{...props} />
</div>
)
}
const mapStateToProps = (state, props) => ({
userToVisit: selectTheUser(props.match.params.username)(state)
})
export default connect(mapStateToProps)(Profile);

Answer 1

In your HOC
render() {
return <ComponentToBeRendered {...this.props}/> ;
}
In your Router
const ProfileWithAuth = withAuth(Profile)
<Route
path="/profile/:username"
render={props=> (<ProfileWithAuth currentUser={currentUser} {...props}/>)}
/>