React Typescript类型的历史和道具

Question

我想在Home Component中使用setName，但它说找不到历史的类型

主组件的错误

//App.tsx
<Home setName={setName}>

类型"｛setName:Dispatch<SetStateAction<string|undefined>>；｝"在类型"Home"中缺少以下属性：历史记录、位置、匹配(2739(

App.tsx

import { useState } from 'react';
setupIonicReact();
const App: React.FC = () => {
const [name, setName] = useState<string>();
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route
path='/home'
render={() => <Home setName={setName}/>} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
)
};
export default App;

主页.tsx

import { RouteComponentProps } from 'react-router';
import { ReactNode } from 'react';
interface HomeProps extends RouteComponentProps{
setName: any;
}
const Home: React.FC<HomeProps> = ({ history }, prop ) => {
//somthing
}
export default Home

扩展不起作用。如何获取历史类型？

Answer 1

在Home.tsx中

1. 使用useHistory挂钩

interface HomeProps {
setName: any;
}
const Home: React.FC<HomeProps> = (props) => {
const history = useHistory()
}

或

2. 使用withRouterHOC

interface HomeProps extends RouteComponentProps{
setName: any;
}
const Home: React.FC<HomeProps> = ({ history, setName } ) => {
//somthing
}
export default withRouter(Home);