0

我坚持这件事。我想从 url 获取 url 参数 (/mypage/?title=my-title) 并将其显示在页面中。目前我在 gatsby 中尝试了仅限客户端的路由

import path from "path"
exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
    if (page.path.match(/^\/headline\/*/)) {
      createPage({
        path: "/headline",
        matchPath: "/headline/*",
        component: path.resolve("src/templates/headline.tsx"),
    })
  }
}
// gatsby-node.js

这是我的模板

    import React  from "react"
    import { Router, RouteComponentProps } from "@reach/router"
    
    type Props = RouteComponentProps<{
      title: string
    }>
    const Test = ({ title = "Test title", location }: Props) => {
      console.log(title)
      console.log(location)
      return <h1>Im test</h1>
    }
    
    const Headline = () => {
      console.log("handle temp called")
      return (
        <Router>
          <Test path="/compare/headline/:title" />
        </Router>
      )
    }
    export default Headline
    // src/templates/headline.tsx

当我点击 /headline/?title=test-my-app 我的组件（测试）没有被路由器标签调用时，什么都没有呈现。有什么帮助吗？

4

1 回答 1

1

我认为问题只是您在路由器的 URL 中有一个额外的“比较”。如果你Router用<Test path="headline/:title" />它替换里面的部分应该可以与你正在测试的 URL 一起工作。

如果路径不匹配任何指定的路径，路由器将返回一个空页面。您可以添加默认路由作为包罗万象。

通常，您不需要顺便在页面内创建路由器，但我想这取决于您的用例。

于 2020-06-24T18:48:12.630 回答