ReactJs 中的嵌套 URL 路由

Question

要转到，我在Gatsby 中使用的competition page 这个函数，要转到那个页面：

gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  if (page.path.match(/^\/competition/)) {
    page.matchPath = "/competition/*"
    createPage(page)
  }
 }

来自competition page，我正在返回Game component：

 return <Game path="/competition/:id" myid={ props.id }/>

然后在Game component 内，我正在渲染一个按钮以转到频道页面：

 <span className={style.button}>
     <Link to={'/competition/'+this.props.myid+'/'+rowdata['GameName']}/>
 </span>

在这里我不知道如何去channel page 我在src/pages 里面并保持我的网址像代码中一样：/competition/'+myid+'/'+GameName

我的方法正确吗？ 我愿意接受其他解决方案

更新： 我可以接受这样的 url：

<span className={style.button}>
     <Link to={'/competition/'+this.props.myid+'/channel'}/>
 </span>

Answer 1

我不熟悉 gatsby，但您似乎需要更严格地使用 API 根路径的正则表达式。

if (page.path.match(/^\/competition/)) {
    page.matchPath = "/competition/*"
    createPage(page)
  }

目前，上述匹配 '/competition'、'/competition9302n'、'/competition/903n/channel'...基本上任何以 '/competition' 开头的内容

如果您想将“/competition/”视为与“/competition/some_id_here/channel”不同的路径，则需要定义两个（至少是更严格的根路径）不同的路径/路由。

例如

if (page.path.match(/^\/competition\/[0-9a-z].*$/i)) { // this will match only '/competition/<some_id_here>'
    page.matchPath = "/competition/*"
    createPage(page)
  } else if (page.path.match(/^\/competition\/[0-9a-z].*\/channel$/i)) {//this will match only '/competition/<some_id_here>/channel'
  }