react中的搜索组件使用静态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。

我在谷歌上搜索了这个错误，大多数人说这是因为某个版本的react路由器，但当我使用不同的版本时，它没有什么区别，我该如何解决这个问题？有人能给我举个例子吗？

Answer 1

由于您使用的是react路由器的v4，因此不再需要从上下文访问路由器。你可以通过道具访问它们

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来包装搜索，以便使用Router道具

import { withRouter } from 'react-router';

...

export default withRouter(Search);

Answer 2

为了让react router将其API注入到您的组件中，您需要用react-router的上下文组件-<Router />包装<Search />组件

像这样：

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

<Router>
<Search />
</Router>

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