Реагируйте: сбой перенаправления 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 / content TextField

Answer 1

Вы можете использовать объект history из react-router-dom и перенаправлять с параметрами запроса, например:

  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

Попробуйте использовать Redirect из 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

Надеюсь, что это поможет