如何在沒有 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>
  )
}