javascript - react -如何重定向到搜索中的另一个组件？

因此，我正在为学校开发应用程序，而在一个问题上停留了大约两天。我正在建立一个从TMDB获取数据的搜索，并且一切正常。当我输入输入时，所有数据都会流入！但是，当我提交并尝试重定向到/ results页面时，该页面链接到在定向到该页面时显示SearchResults的组件，没有任何反应，它停留在主页上。 ，否则我不应该在这种情况下使用它。这是我的搜索组件的代码，如果您能帮助我，我将不胜感激！：

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;

最佳答案

您可以使用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);

通过这种方式，您可以使用React路由器历史记录中的push方法以编程方式进行导航。

在这里，您可以阅读有关withRouter HOC的更多信息：https://reacttraining.com/react-router/web/api/withRouter