Reactjs 使用参数响应嵌套路由

我有一个页面介绍了这条路线：

"/Transfers/e58e63d4-ed09-430a-b2e5-5350c4510648"

我希望在同一页面中使用嵌套路由，如下所示：

<Transfer transferId={this.props.match.params.id} />

<Link  to={`/Transfers/${this.props.match.params.id}/TransferItems`}>Transfer Items</Link>
<Link  to={`/Transfers/${this.props.match.params.id}/NewTransferItem`}>New Transfer Item</Link>

<Switch>
    <Route
        path="/Transfers/:transferId/TransferItems"
        exact
        render={() => <TransferItems transferId={this.props.match.params.id} />}
    />
    <Route
        path="/Transfers/:transferId/NewTransferItem"
        exact
        render={() => <NewTransferItem transferId={this.props.match.params.id} />}
    />
</Switch>

转移项目
新转移项目
}
/>
}
/>

---

我怎样才能做到这一点？

在

传输

组件中，您需要包括您在问题中给出的子路由：

//this is inside Transfer component's render method

render(){
  return (
    <div>
      <Link  to={`/Transfers/${this.props.match.params.id}/TransferItems`}>Transfer Items</Link>
      <Link  to={`/Transfers/${this.props.match.params.id}/NewTransferItem`}>New Transfer Item</Link>

// some other code...

      <Route
          path="/Transfers/:transferId/TransferItems"
          exact
          render={<TransferItems transferId={this.props.match.params.id} />}
      />
      <Route
          path="/Transfers/:transferId/NewTransferItem"
          exact
          render={<NewTransferItem transferId={this.props.match.params.id} />}

      />
    <div>
  )
}

//这在传输组件的渲染方法中
render（）{
返回(
转移项目
新转移项目
//其他一些代码。。。
)
}

当路由应用时，这将直接返回组件

TransferItems

和

NewTransferItem

---

可从此处获取有关此操作的完整指南。

您可以使用嵌套开关，有什么问题，请执行以下操作：

<Transfer transferId={this.props.match.params.id} />

<Link  to={`/Transfers/${this.props.match.params.id}/TransferItems`}>Transfer Items</Link>
<Link  to={`/Transfers/${this.props.match.params.id}/NewTransferItem`}>New Transfer Item</Link>

<Switch>
  <Route
    path="/Transfers/:transferId/TransferItems"
    exact
    render={({match}) => <TransferItems transferId={match.params.id} />}  // don't use this.props.match, use the match from here <<
  />
  <Route
    path="/Transfers/:transferId/NewTransferItem"
    exact
    render={({match}) => <NewTransferItem transferId={match.params.id} />}
  />
</Switch>

转移项目
新转移项目
}//不要使用this.props.match，从这里使用匹配
}
/>

我认为您应该从路由中删除exact，然后从specific到public排序路由。

在可能的情况下，我使用url保存基本路径，然后使用其他路径
in may case i use url to save base first path then other path use it

    function DashboardRestaurant(props) {
        let {url } = useRouteMatch();
       return(

       <div className="col-12">
         <div className="dashboard-nav">
                <div className="dashboard-nav-inner">

                <ul data-submenu-title="Main">
                    <li>
                        <Link to={`${url}`}>
                            <i className="sl sl-icon-settings"></i>
                            Dashboard
                        </Link>
                    </li>

                    <li>
                        <Link to={`${url}/sets`}>
                            <i className="fa fa-calendar-check-o"></i> Sets
                        </Link>
                    </li>

                    <li>
                        <Link to={`${url}/steps`}>
                            <i className="fa fa-calendar-check-o"></i> Steps
                        </Link>
                    </li>
                </ul>




                </div>
            </div>
            <Switch>
             <Route exact path={`${url}`}>
                <h3>Please select a topic.</h3>
              </Route>

               <Route path={`${url}/sets`} component={AddRestaurantSets}/>
               <Route path={`${url}/steps`} component={AddRestaurantSteps}/>

             </Switch>
        </div>)

        
    }

功能仪表板餐厅（道具）{
让{url}=useRouteMatch（）；
返回(


仪表板


设置


台阶


请选择一个主题。
)
}

它仍然找不到路线！设置一个codesandbox示例。我会在那里修改你的代码。它仍然找不到路线！请重新检查代码，我已对其进行了更新-从

渲染

道具中删除了

路由

组件的包装箭头功能。