时间戳

首页 > 解决方案 > 如何在没有链接组件的情况下更改 gatsby 中的路线？

javascript - 如何在没有链接组件的情况下更改 gatsby 中的路线？

问题描述

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

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

http://example.com/你好

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

这是一个搜索栏

标签： javascriptreactjsgatsby

解决方案

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

import { navigate } from 'gatsby'

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

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

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

推荐阅读