React routeur accéder aux propriétés de route dans le composant de route

Question

J'utilise React routeur v4 pour rendre les routes. J'ai un composant de routage simple qui achemine vers une liste d'éléments et une modification existante/ajouter un nouvel élément. C'est un composant d'onglet simple construit avec bootstrap. Je souhaite modifier le titre du composant d'onglet en Add new ou Edit existing selon que l'itinéraire possède une propriété d'ID.

Idéalement, je voudrais éviter de devoir créer des composants supplémentaires car cela ne semble pas améliorer la lisibilité du code.

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

Il existe plusieurs hacks - dont le meilleur semble être la lecture de la propriété location.pathname et l'utiliser pour déterminer si elle est une modifier ou ajouter de nouvelles - qui suffira, mais je ne peux pas aider le sentiment que je suis manquant quelque chose dans

Answer 1

Vous pouvez essayer de séparer les routes pour éditer et ajouter mais pouvez utiliser le même composant avec un type prop.

Exemple

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

ensuite sur votre composant Item vous pouvez vérifier la this.props.type et le rendre en conséquence.

Answer 2

Dans votre composant Item, vous obtiendrez le paramètre url, c'est-à-dire id à match objet du chemin d'accès.

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

basé sur strId vous pouvez change l'étiquette de l'onglet.

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