react 使用router 和 ts 进行页面跳转报错

3 篇文章 0 订阅

使用react路由器v4和Typescript以编程方式导航时出错:

Property 'history' does not exist on type 'Readonly & Readonly<{ children?: ReactNode; }>

解决方法:
你需要导入import { RouteComponentProps } from “react-router-dom”; RouteComponentProps接口有你正在寻找的道具。
例如:

import {RouteComponentProps} from "react-router-dom";
interface IProps {}

type HomeProps = IProps & RouteComponentProps;

interface IState {}

// eslint-disable-next-line
class Login extends React.Component<HomeProps,IState> {

    constructor(props: HomeProps) {
        super(props);
    }

    public jump = () => {
        console.log('跳转');
        this.props.history.push('/index');
    }

    render() {
        return (
           <div>login</div>
        )
        }
   }
React中,可以使用react-router-dom来实现页面跳转。有几种常见的方式可以实现页面跳转。 第一种方式是使用react-router-dom中的Link组件。这种方式适用于点击按钮或其他组件进行页面跳转。具体使用方式如下: ```jsx import { Link } from 'react-router-dom'; // 在需要触发跳转的组件中 <Link to="/path/newpath">点击跳转</Link> ``` 第二种方式是使用react-router-redux中的push方法进行页面跳转。这种方式适用于在Redux中进行页面跳转。具体使用方式如下: ```jsx import { push } from 'react-router-redux'; // 在需要触发跳转的组件中,通过dispatch调用push方法 dispatch(push('/path/newpath')); ``` 第三种方式是通过配置路由来实现页面跳转。可以使用React Router来配置路由。具体代码如下: ```jsx import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; // 配置路由 <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </Router> // 在需要触发跳转的组件中 <Link to="/about">点击跳转</Link> ``` 需要注意的是,在使用React Router进行页面跳转之前,需要先安装相关的依赖包。可以使用npm命令来安装依赖: ```bash npm install react react-dom react-scripts react-router-dom@5 --save ```<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值