如何在ReactJS中点击按钮重定向

问题描述

我想在单击时重定向到“ ./createadd.js”（函数运行时）。我怎么能够？我曾尝试使用history.push（）和反应路由器，但没有任何效果。

APP.JS：

import { render } from '@testing-library/react';
import React from 'react';

class App extends React.Component {
  render(){

  this.selladd = () => {     //Function to redirect to another page

  }

  return (
  <div style={{position: "absolute",left: 1300,top: 25,overflowX: "hidden"}}>
    <button onClick={this.selladd}>Sell</button>
  </div>);
    }
}

export default App;

解决方法

您可以使用链接和历史记录。push（）

 import { render } from '@testing-library/react';
    import React,{ Component } from 'react';
    
    class App extends React.Component {
 constructor(props) {
        super(props);
this.selladd =this.selladd .bind(this);
}
selladd (){
 this.props.history.push({ pathname: ''  })
}
      render(){

      return (
      <div style={{position: "absolute",left: 1300,top: 25,overflowX: "hidden"}}>
        <button onClick={this.selladd}>Sell</button>
      </div>);
        }
    }

或

import { Link } from 'react-router-dom';
     <Link to={{ pathname: '' }}  >
     <button onClick={this.selladd}>Sell</button>
      </Link>

您需要重定向到文件createadd.js中的另一个组件。

将您的组件包装为：

export default withRouter(App)

并为您的路线添加路径，例如：

<Route exact path='/createadd' component={CreateAddComponent} />

从Createadd.js文件导入组件的位置是CreateAddComponent。

然后在您的函数中，只需执行

this.props.history.push('/createadd')

您可以使用重定向到任何页面

this.props.history.push("your link here");

或者，如果您使用react-router-dom，也可以使用

<Redirect to="path" />

或者为什么不将按钮包装在href标签中呢？

<a href ="link"> 
   <button>Click Here</button>
</a>

javascript reactjs reactjs redirect