React:REST重定向失败

Question

当按下[Enter Key]时，有一个文本字段要提交一个事件处理程序。

const [ query, setQuery ] = React.useState('')
...
<TextField 
label="Search Codebase"  
id="queryField"
onChange={ event => setQuery(event.target.value)}
onKeyDown={handleKeyDown}
/>

这是按键按下处理程序功能

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

结果URL为=>/search/
URL应为=>/search/contents of TextField

Answer 1

您可以使用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}`
})
}
}

在此处阅读有关历史对象的更多信息。

Answer 2

尝试从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中，您将执行

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

希望这能帮助