javascript - React-router - 通过 history.push() 导航刷新页面

Question

当我使用 <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);

Answer 1

您可以使用此代码

import { createBrowserHistory } from "history";

// ... Your codes

handleSubmit(e) {
  const historyBrowser = createBrowserHistory({
        basename: process.env.PUBLIC_URL,
        forceRefresh: false,
      });
  historyBrowser.push('?' + qs.stringify({search: this.state.value}));
  e.preventDefault();
}

如果您设置 forceRefresh: true页面将刷新。