React routeur 4 avec chemin en option et paramètre optionnel

Question

Nécessité de déclarer un chemin facultatif qui contient une chaîne et un paramètre
Maintenant, j'ai ce chemin

<Route exact path="/tasks/:id" render={(props) => (
    <AsyncTask {...props} profile={this.state.profile} /> 
)} /> 

je dois avoir

/tasks/:id/notification/:notificationId 

où notification/:notificationId est facultative
J'ai essayé d'ajouter cette façon, mais il ne fonctionne pas

/tasks/:id/(notification/:notificationId)? 

J'ai besoin de savoir si je viens d'un lien de notification, pour le marquer comme lu.

Cela fonctionne

/tasks/:id/(notification)?/:notificationId? 

Mais il correspond et chemins sans notificationId

Answer 1

Malheureusement, il ne semble pas y avoir de moyen de le faire. Le moyen idéal serait de créer deux Routes séparées pour votre but.

<Route exact path="/tasks/:id" component={...} /> 
<Route exact path="/tasks/:id/notification/:notificationId" component={...} /> 

---

Si vous devez vraiment seulement déclarer une route, vous pouvez utiliser une règle de regex personnalisée (la partie qui est enveloppé entre parenthèses après la déclaration du nom du paramètre):

<Route exact path="/tasks/:id/:notificationId(notification/\d+)?" component={...} /> 

Cependant !! - Notez que le paramètre notificationId inclura la sous-chaîne "notification". Par exemple, si vous avez:

tasks/123/notification/456

Vous aurez un taskId de "123" et notificationId de "notification/456" (la chaîne entière)!

Cela dit, l'itinéraire ci-dessus correspondent aux chemins suivants:

• tasks/123
• tasks/123/notification/456

mais pas:

• tasks/123/notification
• tasks/123/notification/abc
• tasks/123/456

etc ...

---

TL; DR - Vous voulez probablement utiliser deux itinéraires individuels, comme indiqué dans le premier exemple ci-dessus.

Answer 2

On dirait qu'il n'y a pas un soutien à cet effet dans React Router [1]. Peut-être pourriez-vous simplement utiliser un paramètre de requête à la place? /tasks/:id?notification=notificationID.