Jeg ønsker å deklarere en bane med en valgfri baneparameter, slik at når jeg legger til den, skal siden gjøre noe ekstra (f.eks. fylle ut noen data):
http://localhost/app/path/to/page <= gjengivelse av siden http://localhost/app/path/to/page/pathParam <= gjengi siden med
noen data i henhold til pathParam
I react-ruteren min har jeg følgende stier for å støtte de to alternativene (dette er et forenklet eksempel):
<Router history={history}>
<Route path="/path" component={IndexPage}>
<Route path="to/page" component={MyPage}/>
<Route path="to/page/:pathParam" component={MyPage}/>
</Route>
</Router>
Spørsmålet mitt er om vi kan erklære det i en rute? Hvis jeg bare legger til den andre raden, blir ruten uten parameteren ikke funnet.
EDIT#1:
Løsningen nevnt her om følgende syntaks fungerte ikke for meg, er det en riktig løsning? Finnes den i dokumentasjonen?
<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />
Min react-router-versjon er: 1.0.3
Redigeringen du la ut var gyldig for en eldre versjon av React-router (v0.13) og fungerer ikke lenger.
Siden versjon 1.0.0
kan du definere valgfrie parametere med:
<Route path="to/page(/:pathParam)" component={MyPage} />
og for flere valgfrie parametere:
<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />
Du bruker parenteser (
`)
for å omslutte de valgfrie delene av ruten, inkludert den ledende skråstreken (/
). Ta en titt på siden Route Matching Guide i den offisielle dokumentasjonen.
Note: *Parameteren :paramName
matcher et URL-segment opp til neste /
, ?
eller #
. Hvis du vil vite mer om stier og params, kan du lese mer her.
React Router v4 er fundamentalt annerledes enn v1-v3, og valgfrie path-parametere er heller ikke eksplisitt definert i offisiell dokumentasjon.
I stedet blir du bedt om å definere en path
-parameter som path-to-regexp forstår. Dette gir mye større fleksibilitet når du definerer stier, for eksempel gjentatte mønstre, jokertegn osv. For å definere en parameter som valgfri legger du til et spørsmålstegn (?
).
For å definere en valgfri parameter gjør du altså dette:
<Route path="/to/page/:pathParam?" component={MyPage} />
og for flere valgfrie parametere:
<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />
Bemerk: *React Router v4 er inkompatibel med [tag:react-router-relay] (les mer her). Bruk versjon v3 eller tidligere (v2 anbefales) i stedet.
For alle React Router v4-brukere som kommer hit etter et søk, er valgfrie parametere i en <Route>
merket med suffikset ?
.
Her er den relevante dokumentasjonen:
https://reacttraining.com/react-router/web/api/Route/path-string
sti: streng
Enhver gyldig URL-bane som path-to-regexp forstår.
https://www.npmjs.com/package/path-to-regexp#optional
Eventuelt
Parametere kan avsluttes med et spørsmålstegn (?) for å gjøre parameteren valgfri. Dette vil også gjøre prefikset valgfritt.
Enkelt eksempel på en paginert del av et nettsted som kan åpnes med eller uten sidetall.
<Route path="/section/:page?" component={Section} />
Fungerende syntaks for flere valgfrie parametere:
<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />
Nå kan url være: