0

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 ?

3
  • 1
    Can we see your Router? This probably doesn't apply to TypeScript. It is more like "Why my app isn't routing?" instead of "Use TyeScript in React". Commented Aug 10, 2021 at 10:50
  • Thanks @Jax-p. I am new in React as well as Typescript. Where can I find Router ? Thanks. Commented Aug 10, 2021 at 10:52
  • 1
    Couple things: 1) why not simple export Team (instead of the memoized version), 2) try rending a simple <button /> instead of the one from coreui Commented Aug 10, 2021 at 11:07

1 Answer 1

1

Because handleNewMember is an async function.

Sign up to request clarification or add additional context in comments.

7 Comments

Thanks @Hamidreza. I removed async but it is not working. Thanks.
@abuabu Can I see your BrowserRouter?
Thanks @Hamidreza. Where can I find BrowserRouter ?
@abuabu Where did you use this routes array?
@abuabu Try to render a simple component instead of AddMember to see if it works.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.