Clash Royale CLAN TAG#URR8PPP

Create custom react route component with typescript. Property 'path' does not exist on type… RouteProps

I'm trying to create my own route component with react. I use typescript but I'm newbie in it so I think that's the origin of my problem.

import * as React from 'react'
import ApplicationState from '../../store'
import connect from 'react-redux'
import RouteComponentProps, RouteProps, Route, Redirect from 'react-router-dom'

interface UserRouteProps extends RouteProps
isAuthenticated: boolean
;

type RouteComponent = React.StatelessComponent<RouteComponentProps<>> | React.ComponentClass<any>

class UserRoute extends React.Component<UserRouteProps, >
constructor()
super()


private renderFn = (Component?: RouteComponent) => (props: RouteProps) =>
if (!Component)
return null


if (this.props.isAuthenticated)
return <Component ...props />


const redirectProps =
to:
pathname: "/register",
state: from: props.location ,
,


return <Redirect ...redirectProps />


public render()
const component: Component, isAuthenticated, ...rest = this.props
return <Route ...rest render=this.renderFn(Component) />



const mapStateToProps = (state: ApplicationState) => ( isAuthenticated: !!state.user.username )

export default connect(mapStateToProps, )(UserRoute)


And route.tsx file:

import * as React from 'react';
import Route from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Pages/Home';
import Login from './components/Pages/Login';
import Register from './components/Pages/Register';
import UserRoute from './components/Routes/UserRoute'

export const routes =
<Layout>
<Route exact path='/' component=Home />
<UserRoute path="/login" component=Login />
</Layout>;


Typescript error

:in [at-loader] ./ClientApp/routes.tsx:12:20
TS2339: Property 'path' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<, ComponentState>> & Readonly<{ childr...'.


To be honest It's my second day with this error and I'm absolutely out of my mind xD In my opinion It should work because path and component are parts of RouteProps interface, and isAuthenticated is provided from redux store. I would be really grateful if somebody could explain to me where is the problem.

1 Answer
1

I've finally found an answer. I did some research and noticed that mapStateToProps function has an optional ownProps argument. So I refactored mapStateToProps and here we are!

import * as React from 'react'
import ApplicationState from '../../store'
import connect from 'react-redux'
import RouteComponentProps, RouteProps, Route, Redirect from 'react-router-dom'

interface UserRouteProps
isAuthenticated: boolean
;

type RouteComponent = React.StatelessComponent<RouteComponentProps<>> | React.ComponentClass<any>

class UserRoute extends React.Component<UserRouteProps & RouteProps, >
constructor(props: UserRouteProps & RouteProps)
super(props)


private renderFn = (Component?: RouteComponent) => (props: RouteProps) =>
if (!Component)
return null


if (this.props.isAuthenticated)
return <Component ...props />


const redirectProps =
to:
pathname: "/register",
state: from: props.location ,
,


return <Redirect ...redirectProps />


public render()
const component, isAuthenticated, ...rest = this.props
return <Route ...rest render=this.renderFn(component) />



const mapStateToProps = (state: ApplicationState, ownProps: RouteProps) =>
return
isAuthenticated: !!state.user.username,
...ownProps



export default connect(mapStateToProps, )(UserRoute)


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.