React-如何将搜索时重定向到另一个组件

Question

所以我正在为学校开发一个应用程序，并且我在一个问题上陷入困境了两天。我正在构建一个从TMDB获取数据的搜索，所有这些都很好。当我输入输入时，所有数据都流入！但是，当我提交并尝试将其重定向到/结果页面时，该页面链接到指向搜索搜索的组件时，什么也不会发生，并且它停留在主页上...我尝试了重定向，但是我要么不正确地使用了它，否则我不应该在这种情况下使用它。这是我的搜索组件的代码，如果您可以帮助我，我会非常感谢！：

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

您可以使用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 方法进行编程从React路由器的历史记录中。

在这里您可以阅读有关 withrouter hoc：https：//reacttraining.com/react-router/web/api/withrouter

Answer 2

您是否使用React路由器进行路由？您需要更改URL吗？没有太多需要这样的东西。除非您要做/results?q=pulp&piction之类的事情，否则将某人发送到/results只是旧学校，以便有人可以刷新或直接链接到结果。

对于这样的东西，只需显示您的结果组件

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

如果您使用的是路由器，并且需要为您的老师使用愚蠢业务需求的学校项目学校，并为我们提供有关您使用的内容的更多信息。

Answer 3

"重定向"组件在" react-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>
    )
}

}