React Router z opcjonalnym parametrem path

Chcę zadeklarować ścieżkę z opcjonalnym parametrem path, stąd gdy dodam stronę, aby zrobić coś ekstra (np. wypełnić niektóre dane):

Http://localhost/app/path/to/page http://localhost/app/path/to/page/pathParam

W moim routerze reactowym mam następujące ścieżki, aby obsługiwać te dwie opcje (jest to uproszczony przykład): 

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

Mój pytanie brzmi, Czy możemy zadeklarować to w jednej trasie? Jeżeli dodam tylko drugi wiersz, wtedy nie zostanie znaleziona trasa bez parametru.

Edytuj#1:

Rozwiązanie wspomniane tutaj {[7] } o następującej składni nie zadziałało dla mnie, czy jest właściwe? Czy istnieje w dokumentacji?

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

Moja wersja Reacta-routera to: 1.0.3

Author: Community, 2016-02-24
Source

2 answers

Edycja, którą opublikowałeś, była ważna dla starszej wersji react-routera (v0.13) i już nie działa.

React Router v1, v2 i v3

Od wersji 1.0.0 definiujesz opcjonalne parametry za pomocą: 

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

I dla wielu opcjonalne parametry: 

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

Używasz nawiasu ( ) aby zawinąć opcjonalne części trasy, w tym ukośnik wiodący (/). Zobacz też Przewodnik dopasowujący trasę strona oficjalnej dokumentacji.

Uwaga: parametr :paramName dopasowuje segment URL do następnego /, ?, lub #. Aby dowiedzieć się więcej o ścieżkach i paramach, przeczytaj więcej tutaj .

React Router v4

React Router v4 różni się zasadniczo od v1-V3, a opcjonalne parametry ścieżki nie są wyraźnie zdefiniowane w oficjalna dokumentacja ani jedno, ani drugie.

Zamiast tego, jesteś polecenie zdefiniowania path parametru, który Path-to-regexp rozumie. Pozwala to na znacznie większą elastyczność w definiowaniu ścieżek, takich jak powtarzające się wzorce, symbole wieloznaczne itp. Aby zdefiniować parametr jako opcjonalny, należy dodać końcowy znak zapytania (?).

Jako takie, aby zdefiniować opcjonalny parametr, należy: 

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

I dla wielu opcjonalne parametry: 

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

Uwaga: React Router v4 jest niezgodny z react-Router-relay (Czytaj więcej tutaj ). Zamiast tego użyj wersji v3 lub wcześniejszej (zalecana wersja V2).

 409
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-14 03:19:12

Dla wszystkich użytkowników Reactowego routera v4 przybywających tutaj po przeszukiwaniu, opcjonalne parametry w <Route> są oznaczone przyrostkiem ?.

Oto Odpowiednia dokumentacja:

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

Path: string

Każda prawidłowa ścieżka URL, którą rozumie Path-to-regexp .

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

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

Opcjonalne

Parametry mogą być zakończone znakiem zapytania (?) aby parametr był opcjonalny. Spowoduje to również, że prefiks będzie opcjonalny.

Prosty przykład stronicowanej sekcji witryny, do której można uzyskać dostęp z numerem strony lub bez niego.

<Route path="/section/:page?" component={Section} />
 49
Author: John,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-08 10:28:50