动态搜索参数反应路由器链接

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 /报告/名称，但我无法找到如何更改动态搜索查询与输入的值。

我要两张认为：1）如果在输入我的用户类型为“非政府组织”，查询应该是API /报告/名称名称=输入2）如果输入为空，查询应该是API /报告/叫什么名字？

Answer 1

你可以声明包含路径属性的对象。搜索字段可以为此目的可以设置当输入不是一个空字符串。

最后，该对象可以传递在to分量作为Link丙值。

View in Stackblitz playground

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>
  );
};