С помощью v используется только для создания элементов <a>
.
Я думаю, что большинство предупреждений против программной навигации исходят от людей, которые не понимают, как работает history
, особенно при попытке сделать это за пределами компонентов. Контроллер withRouter
обеспечивает простой способ добавления маршрутизации к компоненту.
Кроме того, я бы выполнил маршрутизацию из компонента формы вместо кнопки. Затем вам нужно просто убедиться, что тип кнопки - 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)
Большое спасибо @PaulS за такой подробный ответ и так быстро! :) – Noitidart