Error when using Render method but not component in Route [closed] - reactjs

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am currently running into the error
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."
I have searched the error up online and see that most of the time it is caused by someone incorrectly exporting or importing a component but I cannot seem to find where I have done that wrong.
Still, I have managed to find a way to render my component. When I use
PrivateRoute path="/protected" component={Protected} it works, but if I use PrivateRoute with render (render={() => < Protected/>}) it seems to give me the error. I am assuming it has to do with either the PrivateRoute or how im calling the component. Im going to include my dependencies to make sure that I am not calling it wrong. Also here is a link to my codesandbox: https://codesandbox.io/s/dawn-cherry-3yv8e?fontsize=14.
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect,
withRouter
} from "react-router-dom";
import "./styles.css";
import PrivateRoute from "./PrivateRoute";
import Login from "./Login";
function Protected() {
return <h3>Protected</h3>;
}
function Public() {
return <h3>public</h3>;
}
class App extends React.Component {
render() {
return (
<React.Fragment>
<Router>
<div>
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Switch>
<Route path="/public" component={Public} />
<Route path="/login" render={() => <Login />} exact />
<PrivateRoute
path="/protected"
// component={Protected}
render={() => <Protected />}
exact
/>
</Switch>
</div>
</Router>
</React.Fragment>
);
}
}
import React from "react";
import { Route, Redirect } from "react-router-dom";
import fakeAuth from "./fakeAuth";
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
export default PrivateRoute;
If you would like to see the rest of the code check the codesandbox that is linked above. Thanks for any help

Answer 1

You should name your PrivateRoute prop accordingly, quick fix:
<PrivateRoute
path="/protected"
toRender={Protected}
// toRender={() => <Protected />} // This should also work
exact
/>
// Here we use render prop as Component
function PrivateRoute({ toRender: Component, ...rest }) {
return (
<Route
{...rest}
render={props => (
fakeAuth.isAuthenticated
? (
<Component {...props} />
)
: (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
)}
/>
);
}
Working example