Компонент поиска в React с использованием stati c contextTypes

Question

Пока что это мой поисковый компонент

import React from "react";
import PropTypes from "prop-types";

class Search extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  };

  searchRef = React.createRef();

  handleSubmit = (e) => {
    e.preventDefault();
    const searchTerm = this.searchRef.current.value;
    // get the value of that input
    this.context.router.history.push(`/search/${searchTerm}`);
  };

  render() {
    return (
      <div className="search">
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            ref={this.searchRef}
            placeholder="Hoppy"
            //assign that ref to a DOM node
          />
          <input type="submit" value="Search" />
        </form>
      </div>
    );
  }
}

export default Search;

Я хочу использовать метод push для обновления URL-адреса браузера, но получаю ошибку:

Предупреждение: сбойный тип контекста: контекст router помечен как требуемый в Search, но его значение undefined.

Я погуглил ошибку, и большинство людей говорят, что это потому, что определенной версии response-router, но когда я использую другую версию, это не имеет значения, как я могу решить эту проблему? Может кто-нибудь показать мне пример?

Answer 1

Поскольку вы используете v4 реактивного маршрутизатора, вам больше не нужно обращаться к маршрутизатору из контекста. Вы можете получить к ним доступ через props

import React from "react";
import PropTypes from "prop-types";

class Search extends React.Component {

  searchRef = React.createRef();

  handleSubmit = (e) => {
    e.preventDefault();
    const searchTerm = this.searchRef.current.value;
    // get the value of that input
    this.props.history.push(`/search/${searchTerm}`);
  };

  render() {
    return (
      <div className="search">
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            ref={this.searchRef}
            placeholder="Hoppy"
            //assign that ref to a DOM node
          />
          <input type="submit" value="Search" />
        </form>
      </div>
    );
  }
}

export default Search;

Также убедитесь, что поиск отображается по маршруту, например

<Route path="/somesearchpath" component={Search} />

Если поиск не является прямым дочерним элементом Route, вам необходимо использовать withRouter, чтобы обернуть поиск и использовать свойства маршрутизатора

import { withRouter } from 'react-router';


...


export default withRouter(Search);

Answer 2

Чтобы позволить реакционному маршрутизатору внедрить свой API в ваш компонент, вам необходимо обернуть компонент <Search /> контекстным компонентом реактивного маршрутизатора - <Router />

Вот так:

import { BrowserRouter as Router } from "react-router-dom";


<Router>
  <Search />
</Router>

https://codesandbox.io/s/react-router-4-class-component-example-pi4v1