Javascript 反应：REST重定向失败

当按下[输入键]时，有一个文本字段有一个要提交的事件处理程序

const[query，setQuery]=React.useState（“”）
...
setQuery（event.target.value）}
onKeyDown={handleKeyDown}
/>

这是向下键处理程序函数

const handleKeyDown=e=>{
如果（e.key=='Enter'）{
console.log（'moving to:/search/'+query）；//query here=`TextField value`
window.location.href='/search/'+query；//此处查询='？'
}
}

结果URL为=>/search/？

---

URL应该是=>/search/contents of TextField

尝试从

反应路由器dom使用
重定向
，因此您要做的是创建一个状态变量
重定向
，并基于状态变量重定向

   import { Redirect } from "react-router-dom";
   import React, { Fragment, useState} from "react";

  const [ redirect, setRedirect ] = useState(false)    

  const handleKeyDown = e  => {
    if (e.key === 'Enter') {
      console.log('moving to: /search/' + query); // query here = `TextField value`
     setRedirect(true)
    }
  }

在组件的
返回中，您将执行以下操作

return (
{redirect && (<Fragment>
<Redirect to=`/search/${query}` />
</Fragment>)}
//Rest of Code

返回(
{重定向&&(
)}
//代码的其余部分

希望这有帮助
尝试使用
react router dom
中的
Redirect
，因此您要做的是创建一个状态变量
Redirect
并基于状态变量进行重定向

   import { Redirect } from "react-router-dom";
   import React, { Fragment, useState} from "react";

  const [ redirect, setRedirect ] = useState(false)    

  const handleKeyDown = e  => {
    if (e.key === 'Enter') {
      console.log('moving to: /search/' + query); // query here = `TextField value`
     setRedirect(true)
    }
  }

在组件的
返回中，您将执行以下操作

return (
{redirect && (<Fragment>
<Redirect to=`/search/${query}` />
</Fragment>)}
//Rest of Code

返回(
{重定向&&(
)}
//代码的其余部分

希望这有帮助
您可以使用
react router dom
中的
history
对象，并使用查询参数重定向，如下所示：

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

  const history = useHistory();

  const handleKeyDown = e  => {
    if (e.key === 'Enter') {
      console.log('moving to: /search/' + query); // query here = `TextField value`
      history.push({
        pathname: '/search',
        search: query // Should be of the form `?${param}=${value}`
      })
    }
  }

阅读有关历史记录对象的更多信息。
您可以使用
react router dom
中的
history
对象，并使用查询参数重定向，如下所示：

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

  const history = useHistory();

  const handleKeyDown = e  => {
    if (e.key === 'Enter') {
      console.log('moving to: /search/' + query); // query here = `TextField value`
      history.push({
        pathname: '/search',
        search: query // Should be of the form `?${param}=${value}`
      })
    }
  }

阅读有关历史对象的更多信息。
如果您删除本地状态并直接将事件传递给onKeyDown，会发生什么情况？因此，您希望在
handleKeyDown
上将其重定向，并在
/search/
末尾附加
查询
的内容。如果您删除本地状态并直接传递事件，会发生什么情况到onKeyDown？所以您想在
handleKeyDown
上重定向它，在
/search/
的末尾附加
query
的内容；
返回；
生成错误解析错误：JSX值应该是表达式或引用的JSX文本，并且它指向
to之后的第一个回勾“`=
try
@Michael err现在读到：应该是一个赋值或函数调用，而不是看到一个表达式没有未使用的表达式。我通过这个过程了解重定向是如何工作的，但还不太清楚。
return；
生成一个错误解析错误：JSX值应该是一个表达式或一个带引号的JSX文本-它指向了第一个反勾号-“-就在
to=
try
@Michael err现在读到：预期的是赋值或函数调用，但看到的是一个表达式没有未使用的表达式。我通过这个过程了解重定向是如何工作的，但还不太清楚。