es una api de noticias pero no se como hacer que el buscador funcione es decir quiero hacer this.props.history.push("/:query")
pero no esta funcionando, este es mi codigo jsx.
las rutas
<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>
este es el componente busqueda
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>
);
}
}
y este el heder donde paso el componente busqueda
class Header extends Component {
render() {
return (
<AppBar position="static">
<StyledToolbar style={{ backgroundColor: "#f50057" }}>
<Typography variant="h6">News Feeds</Typography>
<Busqueda />
</StyledToolbar>
</AppBar>
);
}
}
Me da error dice que el metodo push del this.props.history.push("/:query")
esta indefinido.