Styjun

Trying to set up a browser router with some routes but typescript is throwing a type error on the components passed and won't compile.

I am using react typescript with the below code:

import BrowserRouter, Switch, Route from "react-router-dom";

export interface AppProps 

const App: React.SFC<AppProps> = () => 
 return (
 <BrowserRouter>
 <div className="App">
 <Switch>
 <Route exact path="/" component=Home />
 <Route exact path="/feed" component=Feed />
 <Route path="/project/:projectid" component=Project />
 <Route path="/user/:userid" component=Profile />
 </Switch>
 </div>
 </BrowserRouter>
 );
;
export default App;

throws this error on each of the component fields of the

Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' is not assignable to type 'ComponentClass<any, any> | FunctionComponent<any> | ComponentClass<RouteComponentProps<any, StaticContext, any>, any> | FunctionComponent<RouteComponentProps<any, StaticContext, any>> | undefined'.
 Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' is not assignable to type 'FunctionComponent<RouteComponentProps<any, StaticContext, any>>'.
 Type 'typeof import("/Users/colbygilbert/Documents/EOS/DevelopX/frontend/src/components/home/Home")' provides no match for the signature '(props: RouteComponentProps<any, StaticContext, any> & children?: ReactNode; , context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.ts(2322)
index.d.ts(87, 3): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<RouteProps>> & Readonly< children?: ReactNode; > & Readonly<RouteProps>'

Here is an example of my Home component:

export interface HomeProps extends RouteComponentProps<>
 auth: Auth;



const Home: React.SFC<HomeProps> = ( auth ) => 
 if (auth.uid) return <Redirect to="/feed" />;
 return (
 <div>
 <Nav size="bg" />
 <div className="c_header__spacing">
 <Vision />
 <Demo />
 <Featurette />
 </div>
 </div>
 );
;

const mapStateToProps = (state: any) => 
 return 
 auth: state.firebase.auth
 ;
;

export default connect(mapStateToProps)(Home);

Current dependencies:

"dependencies": 

 "@types/react-router": "^4.4.5",
 "@types/react-router-dom": "^4.3.1",
 "@types/react-router-redux": "^5.0.18",
 "react-router": "^5.0.0",
 "react-router-dom": "^5.0.0",
 "react-router-redux": "^4.0.8",
 "typescript": "3.3.3"
 

Any help or pointers would be greatly appreciated