Реагировать - Как перенаправить на другой компонент при поиске?

Question

Итак, я работаю над приложением для школы, и я застрял над этим вопросом около двух дней. Я строю поиск, который получает данные из TMDB, и все это прекрасно работает. Когда я набираю данные, все данные поступают! Однако, когда я отправляю и пытаюсь перенаправить на страницу / results, которая связана с компонентом, который отображает SearchResults при перенаправлении на, ничего не происходит, и оно остается на главной странице ... Я пробовал Redirect, но либо я использую его неправильно или я не должен использовать это в этом случае. Вот код для моего компонента поиска, если вы могли бы мне помочь, я был бы очень признателен за это:

import React, { Component, Redirect } from 'react';
import axios from 'axios';

class Search extends Component {
  state = {
    query: '',
    results: []
  };

  getInfo = () => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-US&query=${
          this.state.query
        }&page=1`
      )
      .then(({ data }) => {
        this.setState({
          results: data
        });
      });
  };

  handleInputChange = e => {
    e.preventDefault();
    this.setState(
      {
        query: this.search.value
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo();
          }
        } else if (!this.state.query) {
        }
      }
    );
  };

  render() {
    return (
      <div>
        <form>
          <input
            className='search'
            placeholder='⌕'
            type='text'
            ref={input => (this.search = input)}
            onChange={this.handleInputChange}
          />
        </form>
        {this.state.results.length > 0 && (
          <Redirect
            to={{
              pathname: '/results',
              state: { results: this.state.results }
            }}
          />
        )}
      </div>
    );
  }
}

export default Search;

Answer 1

Используете ли вы React Router для маршрутизации?Вам нужно изменить свой URL?В этом нет особой необходимости.Отправка кого-либо в /results - это просто старая школа, если вы не собираетесь делать что-то вроде /results?q=pulp&piction, чтобы кто-то мог обновить или связать напрямую с результатами.

Для чего-то подобного просто отобразите свой компонент результата

{this.state.results.length && (
  <SearchResults results={this.state.results} />
)}

Если вы используете роутер и вам нужно указать путь к школе, в которой работает школьный проект, ваш учитель соответствует тупым требованиям бизнеса и предоставьте нам больше информации о том, что вы используете.

Answer 2

Компонент «Redirect» находится внутри пакета «Reaction-router-dom». используйте этот подход:

import { Redirect } from "react-router-dom";
import React, { Component } from 'react';

class Search extends Component {
//...

render() {

    const { results } = this.state
    const { props } = this.props

    return (results.length > 0 ? <Redirect
        to={{
            pathname: "/results",
            state: {
                results: results,
                from: props.location
            }
        }}
    /> : <form>
            <input
                className='search'
                placeholder='⌕'
                type='text'
                ref={input => (this.search = input)}
                onChange={this.handleInputChange}
            />
        </form>
    )
}

}

Answer 3

Вы можете использовать withRouter, чтобы ввести историю, а затем сделать: history.push(“/results”)

Код будет выглядеть примерно так:

import React, { Component, Redirect } from 'react';
import axios from 'axios';
import { withRouter } from "react-router";

class Search extends Component {
  state = {
    query: '',
    results: []
  };

  componentDidUpdate(prevProps, prevState) {
  const { history } = this.props;
  if (prevState.results !== this.state.results) {
    history.push('/results');
  }
  }

  getInfo = () => {
    axios
      .get(
        `https://api.themoviedb.org/3/search/tv?api_key=6d9a91a4158b0a021d546ccd83d3f52e&language=en-US&query=${
          this.state.query
        }&page=1`
      )
      .then(({ data }) => {
        this.setState({
          results: data
        });
      });
  };

  handleInputChange = e => {
    e.preventDefault();
    this.setState(
      {
        query: this.search.value
      },
      () => {
        if (this.state.query && this.state.query.length > 1) {
          if (this.state.query.length % 2 === 0) {
            this.getInfo();
          }
        } else if (!this.state.query) {
        }
      }
    );
  };

  render() {
    return (
      <div>
        <form>
          <input
            className='search'
            placeholder='⌕'
            type='text'
            ref={input => (this.search = input)}
            onChange={this.handleInputChange}
          />
        </form>
      </div>
    );
  }
}

export default withRouter(Search);

Таким образом, вы программно навигация с использованием метода push из истории реагирования маршрутизатора.

Здесь вы можете узнать больше о withRouter HOC: https://reacttraining.com/react-router/web/api/withRouter