javascript - ReactJs中的嵌套URL路由

要转到此功能，我正在competition page中使用的Gatsby转到该页面：

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里面，并保持我的URL像代码中一样：

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

更新：
我可以接受这样的网址：

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

最佳答案

我对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'
  }

关于javascript - ReactJs中的嵌套URL路由，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57334168/