Voglio dichiarare un percorso con un parametro di percorso opzionale, quindi quando lo aggiungo alla pagina per fare qualcosa in più (ad esempio riempire alcuni dati):

http: // localhost / app / path / to / page <= visualizza la pagina http: // localhost / app / path / to / page / pathParam <= visualizza la pagina con alcuni dati in base a pathParam

Nel mio router di reazione ho i seguenti percorsi, al fine di supportare le due opzioni (questo è un esempio semplificato):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

La mia domanda è: possiamo dichiararla in un percorso? Se aggiungo solo la seconda riga, il percorso senza il parametro non viene trovato.

EDIT # 1:

La soluzione menzionata qui sulla seguente sintassi non ha funzionato per me, è corretta? Esiste nella documentazione?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

La mia versione di reagente-router è: 1.0.3

La modifica che hai pubblicato era valida per una versione precedente di React-router (v0.13) e non funziona più.

React Router v1, v2 e v3

Dalla versione 1.0.0definisci i parametri opzionali con:

<Route path="to/page(/:pathParam)" component={MyPage} />

e per più parametri opzionali :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

È possibile utilizzare la parentesi ( )per avvolgere le parti facoltative del percorso, inclusa la barra ( /). Consulta la pagina della guida di abbinamento del percorso della documentazione ufficiale.

Nota: Il :paramNameparametro corrisponde a un segmento di URL fino al prossimo /, ?o #. Per ulteriori informazioni su percorsi e parametri, leggi di più qui .

React Router v4 e versioni successive

React Router v4 è sostanzialmente diverso da v1-v3 e i parametri del percorso facoltativo non sono nemmeno esplicitamente definiti nella documentazione ufficiale .

Al contrario, viene richiesto di definire un pathparametro comprensibile per path-to-regexp . Ciò consente una flessibilità molto maggiore nella definizione dei percorsi, ad esempio motivi ripetuti, caratteri jolly, ecc. Quindi, per definire un parametro come facoltativo, aggiungere un punto interrogativo finale ( ?).

Pertanto, per definire un parametro facoltativo, devi:

<Route path="/to/page/:pathParam?" component={MyPage} />

e per più parametri opzionali :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Nota: React Router v4 non è compatibile conreagire-router-relè( leggi di più qui ). Utilizzare invece la versione v3 o precedente (v2 consigliata).

Per tutti gli utenti di React Router v4 che arrivano qui dopo una ricerca, i parametri opzionali in a <Route>sono indicati con un ?suffisso.

Ecco la documentazione pertinente:

https://reacttraining.com/react-router/web/api/Route/path-string

percorso: stringa

Qualsiasi percorso URL valido da percorso a regexp comprensibile .

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

Opzionale

I parametri possono essere suffissi con un punto interrogativo (?) Per rendere facoltativo il parametro. Questo renderà anche il prefisso opzionale.

Semplice esempio di una sezione impaginata di un sito a cui è possibile accedere con o senza un numero di pagina.

<Route path="/section/:page?" component={Section} />

Sintassi di lavoro per più parametri opzionali:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Ora, l'URL può essere:

1. /sezione
2. / Section / page / 1
3. / Section / page / 1 / sort / asc

per reattivo-router V5 e versioni successive utilizzare la sintassi seguente per percorsi multipli

<Route
          exact
          path={[path1, path2]}
          component={component}
        />