Реактив-роутер - как изменить URL

Question

Мне нужно, чтобы пользователь отредактировал URL-адрес, «путь» появляется на входе другого компонента, а при поиске на входе изменяйте URL-адрес в режиме реального времени.Как я могу использовать «withRouter» для выполнения этой функции?

// App.js component

    class App extends Component {

      render() {
        const { match, location, history } = this.props;

        return (
          <div >
              <Search
                searchString={location.pathname}
              />
          </div>
        )
      }
    }

    export default withRouter(App)

//Search.js component  

    const Search = ({ searchString }) => (
            <div>
                <input
                    value={searchString} 
                    type="search"
                    placeholder="Search"
                    aria-label="Search"
                />
            </div>
    )

Answer 1

Это должно работать для вас, хотя я не уверен, что перенаправление пользователя на другую страницу при вводе в поисковый запрос - хороший UX.

// App.js component

    class App extends Component {
      state = {
        searchString: this.props.location.pathname
      }

      handleSearch = (event) => {
        this.setState(
          { searchString: event.target.value },
          () => this.props.history.push('/search?query=' + this.state.searchString)
        );
      }

      render() {
        return (
          <div >
              <Search
                onChange={this.handleSearch}
                searchString={this.state.searchString}
              />
          </div>
        )
      }
    }

    export default withRouter(App)


    const Search = ({ searchString, onChange }) => (
            <div>
                <input
                    onChange={onChange}
                    value={searchString} 
                    type="search"
                    placeholder="Search"
                    aria-label="Search"
                />
            </div>
    )