Question

我正在构建一个初学者React应用程序，但我无法理解如何处理我的状态，以便我可以重定向到搜索结果页面：

我有一个主要的App组件，它使用React Router提供两个组件：

1）着陆（/） - 有一个输入，应该带你到/search并只显示那些标题与你的输入匹配的对象 2）搜索（/search） - 如果直接访问页面或根据您的输入过滤显示所有对象

我的问题是：如果我处理App组件中的状态，它将导致状态更新并在用户输入Landing输入元素时重新呈现，但是如何让它进入/搜索更新状态？索引路线将继续受到影响，因为它只是一个重新渲染而且用户仍然在着陆页上。

我想在没有redux的情况下处理这个问题，因为这将是一个非常小的应用程序。

以下是我父组件的代码：

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { shape, string } from "prop-types";

import Landing from "./Landing";
import Search from "./Search";
import { shows } from "../data.json";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: ""
    };
    this.updateSearchTermHandler = this.updateSearchTermHandler.bind(this);
  }

  updateSearchTermHandler(searchTerm) {
    this.setState({ searchTerm });
  }

  render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Switch>
            <Route
              exact
              path="/"
              component={props => (
                <Landing
                  updateSearchTermHandler={this.updateSearchTermHandler}
                  searchTerm={this.state.searchTerm}
                  {...props}
                />
              )}
            />
            <Route
              path="/search"
              component={props => (
                <Search
                  updateSearchTermHandler={this.updateSearchTermHandler}
                  shows={shows}
                  {...props}
                />
              )}
            />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

App.propTypes = {
  match: shape({
    params: string.isRequired
  }).isRequired
};

export default App;

Answer 1

一种可能的解决方案是将<Router>与您自己的history一起使用。然后，您可以致电history.replace('/search', { searchTerm: 'foo' })

然后在您的登陆组件中，您将拥有this.props.history.location.state.searchTerm

有关创建历史记录的详细信息，请参阅https://reacttraining.com/react-router/web/api/Router

使用ReactJS实现搜索栏

1 个答案: