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 ?
Router? This probably doesn't apply to TypeScript. It is more like "Why my app isn't routing?" instead of "Use TyeScript in React".Router? Thanks.