3'''' Khắc phục lỗi sử dụng <Component {...props}/> gây ra lỗi (ok)

C:\Users\Administrator\Desktop\app\src\guards\AuthenticatedGuard\index.tsx

import React from 'react';
import { Route, Redirect  } from 'react-router-dom';
import { connect } from 'react-redux';
import * as interfaces from './../../interface';
function AuthenticatedGuard(props: any) {
  const { isAuthenticated, component: Component, ...rest } = props;
  return (
    <Route
    	{...rest}
      render = { props => {
      	if (!isAuthenticated && !localStorage.getItem('token')) {
        	return <Redirect to="/login" />
        }
        return <Component {...props}/>
      }}
    />
  )
}
const mapStateToProps = (state: any) => ({
  isAuthenticated: state.app.isAuthenticated
})
const mapDispatchToProps = (dispatch: any) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(AuthenticatedGuard);

C:\Users\Administrator\Desktop\app\src\guards\AuthenticatedGuard\index.tsx

Gây ra lỗi

JSX element type 'Component' does not have any construct or call signatures.  TS2604
import React from 'react';
import { Route, RouteProps, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import * as interfaces from './../../interface';
function AuthenticatedGuard(props: interfaces.Props) {
  const { isAuthenticated, component: Component, ...rest } = props;
  return (
    <Route
    	{...rest}
      render = { props => {
      	if (!isAuthenticated && !localStorage.getItem('token')) {
        	return <Redirect to="/login" />
        }
        return <Component {...props}/>
      }}
    />
  )
}
const mapStateToProps = (state: any) => ({
  isAuthenticated: state.app.isAuthenticated
})
const mapDispatchToProps = (dispatch: any) => ({
})
export default connect(mapStateToProps, mapDispatchToProps)(AuthenticatedGuard);

C:\Users\Administrator\Desktop\app\src\interface\index.tsx

import { RouteProps, RouteComponentProps } from "react-router-dom";
export interface ReqLogin {
  username: string
  password: string
}
export interface Res {
  data: any
  message: string
}
export interface ResLoginApi extends Res {
  data: {
    access_token: string
  }
}
export interface resLogin {
  type: string;
  payload: {
    access_token: string,
    message : string
  }
}
export interface errLogin {
  type: string;
  payload: string;
}
export interface AuthenProps {
	isAuthenticated: boolean
}
export interface Props  extends AuthenProps, RouteProps {
}
export interface StateProps {
	app: {
		isAuthenticated: boolean
	}
}

Last updated

Was this helpful?