2
votes

Réagir la route imbriquée avec des paramètres

J'ai une page avec cette route:

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

Je veux utiliser la route imbriquée dans la même page comme ceci:

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

Comment puis-je faire cela?

reactjs react-router-dom

0 commentaires

4 Réponses :

0
votes

Dans votre composant Transfer , vous devrez inclure les sous-routes que vous avez données dans votre question:

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

Cela renverra les composants de manière dérivée TransferItems et NewTransferItem chaque fois que les itinéraires s'appliquent.

Un guide complet pour cela peut être obtenu à partir de ce basic-example .

2 commentaires

il ne trouve toujours pas l'itinéraire!

Veuillez vérifier à nouveau le code, je l'ai mis à jour - supprimé la fonction de flèche d'enroulement de la prop render pour les composants Route .

0
votes

Vous pouvez avoir des commutateurs imbriqués, quel est le problème, faites-le simplement:

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

2 commentaires

il ne trouve toujours pas l'itinéraire!

mettre en place un exemple de codesandbox. Je vais y réparer votre code.

0
votes

Je pense que vous devriez supprimer exact de vos itinéraires, puis classer les itinéraires de spécifique à public.

0 commentaires

0
votes

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

        
    }

0 commentaires