Javascript 在没有链路组件的情况下，如何在盖茨比中更改路由？

我在react中有一个受控的表单。当用户提交表单时，在

handleSubmit

运行中，在该函数中，我希望将他们重定向/带到一个新的url或页面，其中url与他们的输入值相同

例如，用户键入“hello”，然后当表单提交时，我希望将它们带到

你好

似乎

（盖茨比）

组件在这里不起作用。那么，如果没有

链接

组件，如何更改路由

---

这是针对搜索栏的

您应该导入导航API以推送/替换历史堆栈，以便执行导航

import { navigate } from 'gatsby'

这就是如何在表单提交方法中使用它。它类似于React路由器的

历史.push（）

如果您希望替换历史堆栈，您可以使用

导航（'/hello'，{replace:true}）

。有关详细信息，请参阅盖茨比链接。

您可以使用盖茨比的帮助器函数

例如：

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>
  )
}

import React，{useState}来自“React”
从“盖茨比”导入{navigate}
常数形式=（）=>{
const[value，setValue]=useState（“”）
返回(
{
event.preventDefault（）
导航（`/${value}`）
}}
>
{/*您的输入将其值设置为带有`setValue`*/}的状态
)
}

有一件事，在我重定向到新页面后，“后退”按钮按预期工作。但是，当我刷新重定向页面并单击浏览器上的“上一步”按钮时，它会显示“无法读取未定义的属性‘页面’”，看起来它需要上一个url的一些道具，并且在我刷新页面时会将其删除。我如何预防that@ProttayRudra我不认为路由器本身能帮上忙，因为组件/应用程序会在刷新时重新安装。因此，状态将被重置为其原始状态。我可以通过“state”参数传递信息吗？@ProttayRudra可以，但刷新时不会保留该信息。

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>
  )
}