Как запустить Link из React-router-dom в функции?

Question

[EvgenJunior]

Мне нужно создать поиск в таблице. При вводе текста в текстовое поле input, должен идти запрос на сервер и возвращаться данные соответствующие запросу. Я хочу это реализовать с помощью React-Router. Задумка следующая: я пишу текст в поле, из поля получаю данные с помощью event.target.value, затем хочу полученyое значение добавить к<Link to="api/document/${event.target.value}">. Но я не знаю как можно запустить <Link to="api/document/${event.target.value}">из какой-нибудь функции.
Подскажите если есть какие-нибудь идеи по этому поводу.

Comments

[Даниил Чистяков]

Попробуй повесить на onChange в input useState, где будет храниться event.target.value. А затем сможешь его вывести где угодно. Правда здесь значение будет отставать на одно действие в input, поэтому если значение нужно только внутри одной функции, то лучше на onChange вызывать функцию с параметром event.target.value.
Я правильно понял проблему?

[EvgenJunior]

Я так и сделал, у меня в родительском компоненте хранится в state event.target.value.
Мне надо вставить event.target.value в url для повторного запроса на сервер.
Это реализация поиска на сервере.

Answer 1

[abberati]

history.push

В документации есть

Comments

[EvgenJunior]

документацию прочитал, что-то мне неясно один момент
У меня уже есть какой-то url, history.push дополнит его?
Пример:

<Router>
      <div>
        <nav>
          <ul>
            
            <li>
              <Link to="/api.model">Car</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="api.model">
            <Car />
          </Route>
          
        </Switch>
      </div>
    </Router>

const history = useHistory
  history.push(api.model/car)

после history.push(api.model/car) мой первоначальный url изменится?

[abberati]

EvgenJunior, эксперименты — наше всё