Router reagieren auf Routeneigenschaften in Route Komponente

Question

Ich verwende React Router v4, um Routen zu rendern. Ich habe eine einfache Routen-Komponente, die zu einer Liste von Elementen führt und ein bestehendes/neues Element bearbeiten. Dies ist eine einfache Tab-Komponente, die mit Bootstrap erstellt wird. Ich möchte den Titel der Tab-Komponente entweder in Add new oder Edit existing ändern, abhängig davon, ob die Route eine ID-Eigenschaft hat.

Im Idealfall möchte ich vermeiden, dass Sie zusätzliche Komponenten erstellen müssen, da dies nicht die Lesbarkeit des Codes verbessert.

public render() { 
    const { match, location } = this.props; 

    const customers = cx({ active: !location.pathname.includes("AddEdit") }); 
    const editItem = cx({ active: location.pathname.includes("AddEdit") }); 

    const hasIdParam = {/* Some way to read match params to get the id */}; 

    return <div className='nav-component-container'> 
     <nav> 
      <ul> 
       <li role="presentation" className={items}><NavLink to={`${match.url}/All`} activeClassName='active'>Items</NavLink></li> 
       <li role="presentation" className={editItem}> 
        <NavLink to={`${match.url}/AddEdit`} activeClassName='active'> 
         {/* I'd like this to say either new item or edit existing based on whether the current route has an id parameter or not */} 
        </NavLink> 
       </li> 
      </ul> 
     </nav> 
     <Switch> 
      <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route> 
      <Route path={`${match.url}/AddEdit/:id?`} component={Item}></Route> 
     </Switch> 
    </div>; 
} 

Es gibt verschiedene Hacks - das Beste aus dem Lesen der location.pathname Eigenschaft zu sein scheint und es verwenden, um festzustellen, ob es sich um eine bearbeiten ist oder neue hinzufügen - das genügt aber ich kann das Gefühl nicht los, dass ich etwas fehlt in

Answer 1

Sie können versuchen, Routen zum Bearbeiten und Hinzufügen zu trennen, können aber die gleiche Komponente mit einem Typ prop. verwenden.

Beispiel

<Switch> 
     <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route> 
     <Route path={`${match.url}/Details/:id?`} component={()=>(<Item type="detail" />)}></Route> 
     <Route path={`${match.url}/Edit/:id?`} component={()=>(<Item type="edit" />)}></Route> 
     <Route path={`${match.url}/Add/:id?`} component={()=>(<Item type="add" />)}></Route> 
    </Switch> 

Dann auf Ihrer Item Komponente können Sie die this.props.type überprüfen und entsprechend machen.

Answer 2

In Ihrer Item Komponente erhalten Sie URL-Parameter, d. H. id bis match Objekt der Route Pfad.

var strId = props.match.params.id //ecma5 
let strId = this.props.match.params.id //ecma6 

basierend auf strId können Sie Änderungen auf die Registerkarte Etikett.

if(strId){ 
    //use edit lable 
}else{ 
    //add label 
}