javascript - ReactJs 中的嵌套 URL 路由

Question

要转到我在 Gatsby 中使用此功能的比赛页面，转到该页面:

gatsby-node.js

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

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

从比赛页面我返回游戏组件:

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

然后在 Game 组件 中渲染一个按钮以转到 channel 页面:

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

这里我不知道如何去 channel page 我在 src/pages 里面并且保持我的 url 就像在代码中一样:/competition/'+myid+'/'+游戏名

我的方法正确吗？ 我对其他解决方案持开放态度

更新: 我可以接受这样的 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'
  }