OnClick事件處理程序重定向到reactjs中？

Question

我正在閱讀很多東西，並試圖消化如何使用withRouter和所有設備進行重定向。 但是我在某個地方讀到，應該將onClick頁面重定向到指定的鏈接。 另一件事是在react-router最新版本history.push()無法正常工作，然后如何將其與react-router的最新版本一起使用。 我也閱讀了有關堆棧溢出的問題，但沒有給出任何具體的解決方案。

這是基本的簡單代碼，但也無法獲取官方文檔。

如果我有表單，並且應該將提交按鈕頁面上的頁面重定向到鏈接，則嘗試使用history.push（），但由於官方文檔顯示它不起作用。 我該如何實現？

這是代碼：

import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      firstName:'',
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }

  render(){
    return(
      <div>
        <form>
          firstName
          <input type="text" name="firstName" onChange={this.inputData}/>
          <button type="submit" onClick={}></button>
        </form>
      </div>
    );
  }
}
export default App;

我應該在點擊事件中寫些什么，它將使我重定向到新頁面？

Answer 1

對於簡單的答案，您可以使用react-router中的Link組件代替按鈕。

<span className="input-group-btn">
  <Link to="/register" />Click to Register</Link>
</span>

如果您使用react-router v2.8.1，請嘗試實施路由器重定向。

import { Router } from 'react-router';

export default class Foo extends Component {

  static get contextTypes() {
    return {
      router: React.PropTypes.object.isRequired,
    };
  }

  handleClick() {
    this.context.router.push('/some-path');
  }
}

希望以上兩種選擇都能解決您的問題。