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的链接组件，而不是按钮。

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

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

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

1 个答案: