Question

我正在尝试构建一个简单的新闻应用程序作为练习。我使用 NewsApi 获取所有数据。

我点击了他们的“搜索”终点，当我点击链接时一切正常，但是当我点击回车时，我得到“警告：失败的道具类型：道具to在{{1}中被标记为必需}}，但它的值为 Link。”无论最后一个搜索主题是什么，它都会到达终点。即搜索 yankees 并单击链接，它可以工作，但随后我输入了 dodgers 并按 Enter 键，然后它转到“/yankees？”

undefined

我能够让它像这样工作

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";

const Search = () => {
  const [input, setInput] = useState("");

  let history = useHistory()
  const handleEnter = (e) => {
    if (e.keyCode == "Enter") {
      history.push(`/${e}`);
    } else {
      setInput(e);
    }
  };
  return (
    <form>
      <input
        onChange={(e) => handleEnter(e.target.value)}
      />

      <Link to={input}>Search</Link>
    </form>
  );
};

export default Search;

它现在按回车键推送到正确的组件，但在 url 中，搜索主题以 ?即 localhost:3000/mets?，但是当点击链接时，url 显示为 localhost:3000/mets。

我们有何不同，是否可能存在性能问题，我该如何解决？

Answer 1

我认为如果你给 input 一个默认值，它应该修复警告。您不能将 undefined 作为默认值。

const [input, setInput] = useState('/');

Answer 2

在处理 Enter 键按下事件时，不应使用 onChange。您应该将其作为 onKeyDown 事件处理。在处理程序中检查状态中设置的输入键码和输入值，然后使用 Redirect 进行路由。

<Redirect to={input}/>

未测试，但这是方法。

反应路由器链接在输入时不重定向

2 个答案: