It is a news api but I don't know how to make the search engine work, that is, I want to do this.props.history.push("/:query")
it but it is not working, this is my jsx code.
the routes
<BrowserRouter>
<Container maxWidth="lg">
<Header />
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/categorias/:category" exact component={Category} />
<Route path="/busqueda/:query" component={Busqueda} />
</Switch>
</Container>
</BrowserRouter>
this is the search component
class Busqueda extends Component {
constructor(props) {
super(props);
this.state = {
data: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = event => {
this.setState({ data: event.target.value });
this.props.history.push("/:query");
};
render() {
return (
<Fragment>
<div className="container">
<form className="text">
<input
className="text__input"
type="text"
placeholder="Ingresa un texto"
onChange={this.handleChange}
/>
<button className="text__button">buscar</button>
</form>
</div>
</Fragment>
);
}
}
and this is the heder where I pass the search component
class Header extends Component {
render() {
return (
<AppBar position="static">
<StyledToolbar style={{ backgroundColor: "#f50057" }}>
<Typography variant="h6">News Feeds</Typography>
<Busqueda />
</StyledToolbar>
</AppBar>
);
}
}
It gives me an error saying that the push method of this.props.history.push("/:query")
is undefined.
Try to export the component
Busqueda
using the methodwithRouter
, this will add the methodhistory()
tothis.props
your component:Search.jsx: