Форма поиска с возможностью поделиться URL-адресом в ReactJs

Question

Я пытаюсь создать простой компонент поиска в ReactJs с возможностью записи параметров поиска в URL-адресе, тогда URL-адрес может быть передан кому-либо, и поиск может быть запущен автоматически, если входной запрос (URL-адрес ) не пуст.

В этом состоянии моего POC проблема заключается в том, что когда я что-то ввожу в поле ввода, это автоматически записывается в URL (я думаю, из-за useState). Я хотел бы написать запрос в URL-адресе только тогда, когда я нажимаю кнопку поиска, но из-за хука я не могу этого сделать.

Вот мой код:

App.js

import React from "react";
import history from "./history";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Search from './Search';


function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Search}/>
    </Router>
  );
}

export default App;

Search.js

import React, { useState } from "react";
import history from "./history";


const Search = (props) => {

  let params = new URLSearchParams(props.location.search);
  let query = params.get("query") != null ? params.get("query"): "";

  const [search, setSearch] = useState(query);
    
  function startSearch() {
    history.push(`/?query=${search}`);

    console.log(`Result : ${search}`);
  }

  // Start search on the page if a query has been set
  if (query.length > 0) startSearch();

  return (
    <div>
        <input value={search} onChange={(e) => setSearch(e.target.value)}/>
        <button onClick={startSearch} >Search</button>
    </div>
  );
}

export default Search;

Спасибо за помощь!

Форма поиска с возможностью поделиться URL-адресом в ReactJs

Ответы (1)