React Router - не маршрутизирует автоматически при отправке формы

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, например, вступает в игру. Однако мне нужно автообновлять всякий раз, когда я запускаю ввод или нажимаю кнопку Search в моем запросе без необходимости ручного обновления страницы для просмотра результатов моего запроса.

Я прочитал эту запись довольно усердно, и я попробовал все эти шаги, но я все еще безуспешен с любым подходом, который я прочитал.

Answer 1

Разобрался! Мне пришлось использовать функцию жизненного цикла componentWillReceiveProps от React.

Код:

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 }))
    }
}

Более подробную информацию можно найти здесь .