如何使用 React 和 TypeScript 修复编程导航问题

Question

我是 React 的新手，我正在学习使用 typescript.since 的 React 程序化导航大多数教程都使用 java 脚本，我无法解决使用程序化导航的问题打字稿

就像我试过的大多数教程一样

this.props.history.push("/page");

显示错误 'history' does not exist on type

我尝试了几种解决方案，例如

 const history=createBrowserHistory();
 history.push("/page")

此方法将更改 url 路径，但组件不会按照此处所述加载 https://github.com/ReactTraining/react-router/issues/4059

我也尝试了另一种解决方案

this.context.push("/page");

这给了我以下错误 TypeError: _this.context.push 不是函数

我的完整代码

import * as queryString from 'query-string';
import * as React from 'react';



interface IrentalProps{
name:string,
}



class Rental extends React.Component<IrentalProps, any> {

public extracturl=()=>{

    const stringfy=queryString.parse(location.search);
    return stringfy.id;
}
public handleClick=()=>{
   this.context.push("/page"); //issue 
}
public render() { 
    return ( 
        <div style={{paddingTop:100}}>
        {this.extracturl()}
        <button onClick={this.handleClick}>navigate</button> //calling the function
       </div>
     );
}

}

export default Rental;

我只需要像在 SPA 中一样使用 typescript 和 browserrouter 单击按钮导航到另一个页面

注意：redirect 正在运行，带有 createhashhistory() 的 hashrouter 也在运行。

Answer 1

你需要 react-router 类型。在项目的根目录安装它们 (package.json)

npm install --save @types/react-router

和

npm install --save @types/react-router-dom

Answer 2

创建您自己的历史记录时，您需要使用 Router 而不是 BrowserRouter 。

import createBrowserHistory from 'history/createBrowserHistory'

const History = createBrowserHistory()
export default History;

并将历史传递给路由器的 props

感谢 BTM

如何使用 React 和 TypeScript 修复编程导航问题

how to fix programmatic navigation issue using react and typescript

typescript

reactjs

react-router

react-tsx