0

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.

introducir la descripción de la imagen aquí

1 respuesta 1

1

Intenta exportar el componente Busqueda utilizando el metodo withRouter, este le agregara el metodo history() al this.props de tu componente:

Busqueda.jsx:

//...
import { withRouter } from 'react-router-dom';

class Busqueda extends Component {
  //...
}

export default withRouter(Busqueda);
2
  • ahora me aparece el parametro localhost:3000/:query pero este "query" no agarra el valor de lo que escribo en el input, pero gracias es un paso mas a resolverlo ;) Commented el 5 nov. 2019 a las 18:02
  • sabes lo raro es que escribo en el buscador una palabra y me devuelve el componente buscador y no el arreglo de busquedas :( Commented el 5 nov. 2019 a las 18:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.