Question

我有一条使用此路线的页面：

"/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>

我该怎么做？

Answer 1

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

//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>
  )
}

无论何时应用路由，这都会严格返回组件TransferItems和NewTransferItem。

可以从此basic-example获取有关此问题的完整指南。

Answer 2

您可能有嵌套的开关，这是什么问题，只需执行以下操作即可：

<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>

Answer 3

我认为您应该从路线中删除确切的路线，然后再指定从特定路线到公共路线的路线。

Answer 4

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>)

        
    }

用参数反应嵌套路线

4 个答案: