时间戳

首页 > 解决方案 > React Router Link在输入时未重定向

reactjs - React Router Link在输入时未重定向

问题描述

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

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

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;

我能够让它像这样工作

const Search = () => {
  const [input, setInput] = useState("");
  let history = useHistory();
  return (
    <form>
      <input
        onChange={(e) => {
          setInput(e.target.value);
        }}
        onKeyDown={(e) => {
          if (e.code === "Enter") {
            history.push(`/${input}`);
          }
        }}
        placeholder='Search by keyword'
      />
      <Link to={input}>Search</Link>
    </form>
  );
};

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

我们有什么区别，是否可能存在性能问题，我该如何解决？

标签： reactjsreact-router

解决方案

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

<Redirect to={input}/>

未经测试，但这是方法。

推荐阅读