react-router与动态搜索参数的链接

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）如果输入为空，则查询应为api / report / name

Answer 1

您可以声明一个包含pathname属性的对象。 输入不是空字符串时，可以为此对象设置搜索字段。

最后，该对象可以被传递给作为to在丙值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>
  );
};