Nothing was returned from render in React Component

Question

In the App index.js file I am handling redirects as navigate based on user authentication.

const IndexAuth = () => navigate(routes.DASHBOARD);

const IndexPageContent = withAuthorization(authCondition)(() => (
 <AuthUserContext.Consumer>
    {authUser => (authUser ? <IndexAuth /> : null)}
  </AuthUserContext.Consumer>
));

export default withAuthentication(IndexPage);

The redirect works but I am getting an error at IndexAuth and causing the page at routes.DASHBOARD to not render.

IndexAuth(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

As I understand it, I need to return something for the component to render . How can I do this?

Answer 1

If IndexAuth is just a wrapper around navigate, then navigate needs to return something, which it doesn't. If navigate is your function, then add a return value to it. Otherwise, add it to IndexAuth.

Answer 2

Just to extend on Joseph Sible's answer with a solution for others in the same boat.

I fixed the issue by returning null in IndexAuth

const IndexAuth = () => {
  navigate(routes.DASHBOARD);
  return null;
};