如何在没有 Link 组件的情况下更改 gatsby 中的路由？

Question

我在反应中有一个受控的形式。 当用户提交表单时，在handleSubmit运行中，在该函数中，我想将它们重定向/带到新的 url 或页面，其中 url 与它们的输入值相同。

例如用户输入“你好”，然后当表单提交时我想带他们去

http://example.com/你好

似乎</Link>(gatsby)组件在这里不起作用。 那么如何在没有Link组件的情况下更改路线

这是一个搜索栏

Answer 1

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

import { navigate } from 'gatsby'

这就是您可以在表单提交方法中使用它的方式。 它类似于 React-Router 的history.push() 。

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

如果您希望替换历史堆栈，您可以使用navigate('/hello', { replace: true })代替。您可以参考 Gatsby Link文档了解更多详细信息。

Answer 2

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