React Router v4 <Link> for Form

Question

如何将 <Link> 与 <form> 一起使用？我试图避免程序化路由，因为我看到很多针对它的警告。

表单有两个字段：

<form>
    <input type="text" id="what"/>
    <input type="text" id="where"/>
    <Link><button type="submit"></Link>
</form>

我的目标是将页面发送到 '/' + document.getElementById('where').value + '/' + document.getElementById('what').value，是否可以使用 v4 路由器？

Answer 1

对于 v4，<Link> 仅用于创建 <a> 个元素。

我认为大多数反对程序化导航的警告来自于人们并不真正了解 history 的工作原理，尤其是在尝试在组件之外进行操作时。 withRouter HOC 提供了一种向组件添加路由的简单方法。

此外，我会从表单组件内而不是按钮进行路由。然后，您只需确保按钮的类型为 submit（默认值）。

您还使用 DOM 函数访问代码中的值。我建议改用受控输入，但这显然取决于您。

class NavForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      what: '',
      where: ''
    }

    this.submitHandler = this.submitHandler.bind(this)
    this.handleInput = this.handleInput.bind(this)
  }

  handleInput(event) {
    const target = event.target
    this.setState({
      [target.name]: target.value
    })
  }  

  submitHandler(event) {
    event.preventDefault()
    // do some sort of verification here if you need to
    this.props.push(`${this.state.where}/${this.state.what}`)
  }

  render() {
    return (
      <form onSubmit={this.submitHandler}>
        <input
          type='text'
          name='what'
          value={this.state.what}
          onChange={this.handleInput} />
        <input
          type='text'
          name='where'
          value={this.state.where}
          onChange={this.handleInput} />
        <button>Submit</button>
      </form>
    )
  }
}

export default withRouter(NavForm)

React Router v4 <Link> for Form

React Router v4 <Link> for Form

react-router

react-router-v4