Когда я использую компонент <Link />
, навигация происходит без обновления страницы, но когда я пытаюсь перейти по history.push()
(т. Е. При отправке формы), страница обновляется.Как я могу предотвратить, чтобы history.push () выполняла обновление?Вот мой код:
import React from 'react';
import {withRouter} from 'react-router-dom';
import qs from 'query-string';
class SearchBox extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({value: e.target.value});
}
handleSubmit(e) {
this.props.history.push('?' + qs.stringify({search: this.state.value}));
e.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="searchbox">
<input
type="text"
name="search"
value={this.state.value}
onChange={this.handleChange}
placeholder="Search..."
/>
</div>
</form>
);
}
}
export default withRouter(SearchBox);