自定義路由與反應路由器4

Question

我創建了一個自定義路由組件與React。我遇到了我找到的以下解決方案，但後來發現錯誤。

import * as React from 'react'; 
import { Route, Redirect } from 'react-router-dom'; 
import { isLoggedIn } from '../../modules/AuthService'; 

export class AuthRequiredRoute extends Route { 
render() { 
    if (!isLoggedIn()) { 
     return <Redirect to='/login' /> 
    } else { 
     return <this.props.component /> 
    } 
    } 
} 

錯誤：JSX元素類型 'this.props.component' 不具有任何構造或致電簽名。

以下是辦法，我要使用的組件：

<AuthRequiredRoute exact path='/' component={Home} /> 

任何人可以幫助我解決這個問題嗎？

Answer 1

使用Component變量構建JSX組件：

export class AuthRequiredRoute extends Route { 
    render() { 
     if (!isLoggedIn()) { 
      return <Redirect to='/login' /> 
     } else { 
      let Component = this.props.component; 
      return <Component /> 
     } 
    } 
} 

Answer 2

我設法用不同的解決方案去解決這個問題。

我創建了一個名爲Authenticated.tsx與下面的代碼特定模塊：

import * as React from 'react'; 
import { withRouter, RouteComponentProps } from 'react-router-dom'; 
import { isLoggedIn } from '../../modules/AuthService'; 

export function Authenticated(BaseComponent) { 
class AuthenticatedComponent extends React.Component<RouteComponentProps<any>, {}> { 
    componentWillMount() { 
     this.checkAuthentication(this.props); 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.location !== this.props.location) { 
      this.checkAuthentication(nextProps); 
     } 
    } 

    checkAuthentication(params) { 
     const { history } = params; 
     if (!isLoggedIn()) { 
      history.replace({ pathname: '/login' }); 
     } 
    } 

    render() { 
     return <BaseComponent {...this.props} />; 
    } 
} 

return withRouter(AuthenticatedComponent); 
} 

然後我用它在我的routes.tsx組件這樣：

import { Authenticated } from './components/utils/Authenticated'; 

export const routes = <Layout> 
<Route exact path='/' component={Authenticated(Home)} /> 
<Route path='/login' component={Login} /> 
</Layout>;