javascript - 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');
  }
}

我希望上述两个选项可以解决您的问题。