在 React 中使用 TypeScript答案

【问题标题】：Use TypeScript in React在 React 中使用 TypeScript
【发布时间】：2021-10-13 22:25:07
【问题描述】：

我正在使用 Typescript 学习 React。我有一个view，如下所示。

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)

我在route.ts 文件中有以下代码

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

当我点击按钮时，我可以在浏览器的地址栏中看到 URL http://localhost:3000/#/team/add-member。但我看不到视图 (HTML)。

解决办法是什么？

【问题讨论】：

我们可以看看你的Router吗？这可能不适用于 TypeScript。它更像是 “为什么我的应用没有路由？” 而不是 “在 React 中使用 TyeScript”。
谢谢@Jax-p。我是 React 和 Typescript 的新手。我在哪里可以找到Router？谢谢。
几件事：1）为什么不简单的导出团队（而不是记忆的版本），2）尝试渲染一个简单的而不是 coreui 的那个

标签： reactjs typescript tsx

【解决方案1】：

因为handleNewMember 是一个异步函数。

【讨论】：

谢谢@Hamidreza。我删除了async，但它不起作用。谢谢。
@abuabu 我可以看看你的BrowserRouter吗？
谢谢@Hamidreza。我在哪里可以找到BrowserRouter？
@abuabu 你在哪里使用了这个routes 数组？
@abuabu 尝试渲染一个简单的组件而不是AddMember，看看它是否有效。