0

我是反应新手，我正在学习使用 typescript 进行反应编程导航。因为大多数教程都使用 java 脚本，所以我无法解决使用 typescript 编程导航的问题

正如我尝试过的大多数教程一样

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

显示错误“历史”在类型上不存在

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

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

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

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

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

这给了我以下错误 TypeError: _this.context.push is not a function

我的完整代码

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 中单击按钮导航到另一个页面

注意：redirect 正在工作，并且带有 createhashhistory() 的 hashrouter 也正在工作。

4

2 回答 2

0

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

npm install --save @types/react-router

和

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

于 2019-01-07T14:07:14.887 回答
0

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

import createBrowserHistory from 'history/createBrowserHistory'

const History = createBrowserHistory()
export default History;

并将历史传递给路由器的道具

感谢 BTM

于 2019-01-08T06:45:15.647 回答