Как изменить маршруты в Гэтсби без компонента Link?

Question

У меня есть контролируемая форма в реакции. Когда пользователь отправляет форму во время выполнения handleSubmit, в этой функции я хочу перенаправить / перенести их на новый URL-адрес или страницу, где URL-адрес совпадает с их входным значением.

Например, пользовательские типы "Привет", тогда, когда форма отправляет, я хочу принять их к

http://example.com/ привет

Это похоже, </Link>(gatsby) компонент не будет работать здесь. Так как мне изменить маршрут без Link Компонента

Это для панели поиска

Answer 1

Вы должны импортировать API навигации для добавления / замены стека истории, чтобы выполнить навигацию.

import { navigate } from 'gatsby'

И это то, как вы можете использовать его в методе отправки формы. Это похоже на history.push().

submit() {
  // rest of your form logic
  navigate('/hello');
}

в React-Router. Если вы замените стек истории sh, вместо этого вы можете использовать navigate('/hello', { replace: true }). Вы можете ссылаться на ссылку Gatsby документация для более подробной информации.

Answer 2

Вы можете использовать вспомогательную функцию Гэтсби navigate.

Например:

import React, { useState } from "react"
import { navigate } from "gatsby"

const Form = () => {
  const [value, setValue] = useState("")

  return (
    <form
      onSubmit={event => {
        event.preventDefault()
        navigate(`/${value}`)
      }}
    >
      {/* here goes your input that sets its value to state with `setValue` */}
    </form>
  )
}