Question

我正在尝试将我的搜索字段路由到该路由：

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Switch>
          <Route exact path='/:q' component={SearchPage} /> //trying to route here
        </Switch>
        <Footer />
      </div>
    );
  }
}

SearchField.js

import React from 'react'

import { withRouter } from 'react-router-dom'

class SearchField extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            query: ''
        }
    }

    handleChange = event => {
        const {name, value, type, checked} = event.target
        type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
    }

    handleSubmit = event => {
        event.preventDefault()
        this.props.history.push(`/${this.state.query}`) //my routing attempt using history.push
    }

    render() {
        return (
            <div>
                <form className="form-inline my-2 my-lg-0" onSubmit={this.handleSubmit}>
                    <input
                        className="form-control mr-sm-2"
                        type="search"
                        name="query"
                        onChange={this.handleChange}
                        value={this.state.query}
                        placeholder="Search"
                        aria-label="Search"
                    />
                    <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        )
    }
}

export default withRouter(SearchField)

因此，每当我在搜索字段上键入查询时，它都会像这样正确地将其显示在地址栏上：

，但是前端保持不变而不更改查询（也没有控制台错误-完全干净）。例如，仅当我刷新该页面是我的新查询safe起作用时。但是，每当我按下Enter键或在查询上按Search按钮时，我都需要它自动刷新，而无需手动刷新页面来查看我的查询结果。

我已经非常努力地阅读了post，并且已经尝试了所有这些步骤，但是对于我所阅读的任何方法，我仍然没有成功。

Answer 1

想通了！我不得不使用React的componentWillReceiveProps生命周期函数。

代码：

componentWillReceiveProps(nextProps) {
    if ( nextProps.match.params.q !== this.props.match.params.q ) {
        fetch(`//derpibooru.org/search.json?q=${nextProps.match.params.q}`)
        .then(res => res.json())
        .then(data => this.setState({ images: data }))
    }
}

更多信息here。

React Router-不会在提交表单时自动路由

1 个答案: