реакции-маршрутизатор Связь с динамическими параметрами поиска

Question

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

 const ReportRoute = (props) => {
  const [input, setInput] = useState('');

  const testObject1 = {
    name: {input},
  }

  return (
      <div>
        <input value={input} onInput={e => setInput(e.target.value)} />
        <Link
          to={{
            pathname: `api/report/name`,
            search: queryString.stringify(testObject1),
            }}
        >
          Download {props.type} report
        </Link>
      </div>
  );
};

У меня есть ссылка на / api / report / name, но яНе могу найти, как динамически изменить поисковый запрос со значением из входных данных.

Я хочу, чтобы два мнения: 1) Если мой пользователь вводит "ngos" во входных данных, запрос должен быть api / report / name?name = input 2) И если input пуст, запрос должен быть api / report / name

Answer 1

Вы можете сделать объявление объекта, содержащего свойство pathname.Поле поиска может быть установлено для этого объекта, когда input не является пустой строкой.

Наконец, объект может быть передан как значение to prop в компоненте Link.

Вид на игровую площадку Stackblitz

const Report = (props) => {
  const [input, setInput] = useState('');

  const testObject1 = {
    name: input,
  }

  const to = {
    pathname: 'api/report/name'
  }

  if (input !== '') {
    to['search'] = queryString.stringify(testObject1)
  }

  return (
      <div>
        <input value={input} onInput={e => setInput(e.target.value)} />
        <Link
          to={to}
        >
          Download {props.type} report
        </Link>
      </div>
  );
};