Use TypeScript in React

Question

I am learning React with Typescript. I have a view like below.

index.tsx

import React from 'react'
import { CButton } from '@coreui/react'
import { useHistory } from 'react-router'

const Team = () => {
    const history = useHistory()
    const handleNewMember = () => {
        history.push('/team/add-member')
    }
    return (
        <React.Fragment>
            <div className="page-title">
                <CButton color="primary" className="long-btn" onClick={handleNewMember}>
                    Add a New Member
                </CButton>
            </div>
        </React.Fragment>
    )
}

export default React.memo(Team)

I have below code in route.ts file

const AddMember = React.lazy(() => import('./views/team/add-member'))

const routes = [
    { path: '/team/add-member', exact: true, name: 'Add Team Member', component: AddMember },
]

export default routes

When I click on the button I can see URL http://localhost:3000/#/team/add-member at address bar of browser. But I can't see the View (HTML).

What is the solution ?

Answer 1

Because handleNewMember is an async function.