Skip to content

Instantly share code, notes, and snippets.

@oscarr-reyes
Created March 11, 2019 15:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oscarr-reyes/b965d5c13a095866931b50a4334b8711 to your computer and use it in GitHub Desktop.
Save oscarr-reyes/b965d5c13a095866931b50a4334b8711 to your computer and use it in GitHub Desktop.
Flow throws error for rendering Component passed from a prop
// @flow
import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import CookieStorage from "./../services/CookieStorage";
import type { Component as ComponentType } from "react";
type Props = {
component: ComponentType<any, any>
}
class ProtectedRoute extends Component<Props> {
render() {
const isAuthenticated = this.isAuthenticated();
const {...props} = this.props;
const AuthorizedComponent = this.props.component;
return (
<Route
{...props}
render={props => (
isAuthenticated ?
<AuthorizedComponent {...props} /> :
<Redirect to="/"/>
)}
/>
);
}
isAuthenticated(): boolean {
const data = CookieStorage.get("foobar");
return data !== null;
}
}
export default ProtectedRoute;
@oscarr-reyes
Copy link
Author

oscarr-reyes commented Mar 11, 2019

Flow throws:

Error:(23, 8) Cannot create `AuthorizedComponent` element because `React.Component` [1] is not a React component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment