Gatsby 更改页面 URL - Javascript

Gatsby 是一个基于 React 的现代网站构建工具，提供了许多强大的功能去构建高性能、可扩展的网站。在 Gatsby 中，可以很容易地更改页面的 URL，这在 SEO 方面非常重要。本篇介绍如何使用 Gatsby 更改页面 URL。

安装插件

要更改页面 URL，我们需要安装 gatsby-plugin-create-client-paths 插件。这个插件允许 Gatsby 生成动态链接，这样我们就可以更改页面 URL。

在终端中执行以下命令安装插件：

npm install gatsby-plugin-create-client-paths

或者使用 yarn：

yarn add gatsby-plugin-create-client-paths

配置插件

在 gatsby-config.js 文件中，我们需要配置插件。假设我们想要更改 /category/:slug 页面的 URL。我们需要在配置文件中添加以下代码：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/category/*`] },
    },
  ],
}

这个代码块告诉 Gatsby 需要生成匹配 /category/* 的动态链接。这样我们就可以使用 Gatsby 的 navigate 函数更改页面 URL。

更改页面 URL

要更改页面 URL，我们可以使用 Gatsby 的 navigate 函数。假设我们有一个页面需要更改 URL：

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

const CategoryPage = ({ slug }) => {
  const handleClick = () => {
    navigate(`/new-url/${slug}`)
  }

  return (
    <div>
      <h1>Category: {slug}</h1>
      <button onClick={handleClick}>Go to new URL</button>
    </div>
  )
}

export default CategoryPage

这个代码块中，我们使用 navigate 函数将页面重定向到 /new-url/${slug}。通过这种方式，我们就可以在不影响 SEO 的情况下更改页面 URL。

总结

在 Gatsby 中更改页面 URL 非常简单。我们只需要安装并配置 gatsby-plugin-create-client-paths 插件，然后使用 Gatsby 的 navigate 函数更改页面 URL。这样我们就可以在不影响 SEO 的情况下更改页面 URL。