Reakcja routera z opcjonalnym parametrem ścieżki

306

Chcę zadeklarować ścieżkę z opcjonalnym parametrem ścieżki, dlatego gdy dodam ją do strony, aby zrobić coś dodatkowego (np. Wypełnić niektóre dane):

http: // localhost / app / path / to / page <= render strony http: // localhost / app / path / to / page / pathParam <= renderuj stronę z pewnymi danymi zgodnie z pathParam

W moim routerze reagującym mam następujące ścieżki, aby obsługiwać 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>

Moje pytanie brzmi: czy możemy to zadeklarować na jednej trasie? Jeśli dodam tylko drugi wiersz, trasa bez parametru nie zostanie znaleziona.

EDYCJA 1:

Wspomniane tutaj rozwiązanie dotyczące następującej składni nie zadziałało, czy jest właściwe? Czy istnieje w dokumentacji?

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

Moja wersja routera reagującego to: 1.0.3

tbo
źródło

Odpowiedzi:

650

Opublikowana edycja była poprawna dla starszej wersji React-routera (v0.13) i już nie działa.


Reaguj Router v1, v2 i v3

Od wersji 1.0.0definiujesz parametry opcjonalne za pomocą:

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

i dla wielu opcjonalnych parametrów:

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

Używaj nawiasów, ( )aby zawijać opcjonalne części trasy, w tym ukośnik wiodący (/ ). Sprawdź stronę Przewodnika dopasowywania trasy oficjalnej dokumentacji.

Uwaga: parametr odpowiada segment URL do następnego , lub . Aby uzyskać więcej informacji na temat ścieżek i parametrów,:paramName/?# przeczytaj więcej tutaj .


Reaguj Router v4 i nowszy

React Router v4 zasadniczo różni się od v1-v3, a opcjonalne parametry ścieżki nie są wyraźnie zdefiniowane w pliku oficjalnej dokumentacji .

Zamiast tego polecono Ci zdefiniować pathparametr, który zrozumiały dla path-to-regexp . Pozwala to na znacznie większą elastyczność w definiowaniu ścieżek, takich jak powtarzanie wzorców, symboli wieloznacznych itp. Aby więc zdefiniować parametr jako opcjonalny, dodajesz końcowy znak zapytania ( ?).

Aby zdefiniować opcjonalny parametr, wykonujesz:

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

i dla wielu opcjonalnych parametrów:

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

Uwaga: React Router v4 jest niezgodny z( czytaj więcej tutaj ). Zamiast tego użyj wersji v3 lub wcześniejszej (zalecane v2).

Chris
źródło
2
To wciąż pytanie o wiele opcjonalnych parametrów w adresie URL, takich jak/route(/:category/(:article)
Alex Shwarc,
1
@AlexShwarc, dobry punkt, dzięki. Dodałem kod, aby zademonstrować wiele opcjonalnych parametrów. Spójrz.
Chris
1
@Chris Jestem pewien, że to nie działa w ten sposób, czy to sprawdziłeś?
Alex Shwarc,
@Chris z 3 wersjami
Alex Shwarc
1
Czy mogę utworzyć opcjonalną ścieżkę param do głównej trasy? Na przykład muszę dodać parametr ścieżki do ścieżki, a moim adresem URL strony głównej będzie „/” i „/ pl” Oto demo
Kholiavko
76

Dla każdego użytkownika React Router v4 przybywającego tutaj po wyszukiwaniu opcjonalne parametry w <Route>są oznaczone ?sufiksem.

Oto odpowiednia dokumentacja:

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

ścieżka: ciąg

Każda poprawna ścieżka adresu URL, którą rozpoznaje ścieżka do wyrażenia regularnego .

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

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

Opcjonalny

Parametry można uzupełnić 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 za pomocą numeru strony lub bez niego.

<Route path="/section/:page?" component={Section} />
Jan
źródło
@ user2928231 Dzięki, zaktualizowano o nowy adres URL dokumentów. O ile mogę powiedzieć, <Match pattern />teraz jest <Route path />znowu, ale sufiks znaku zapytania pozostaje teraz podejściem do obsługi opcjonalnych parametrów.
Jan
2
Cześć! Nadal mam problem z opcjonalnego parametru i nie można dokonać kolejnych tras robocze: Mam players, players/123, players/123/edit, players?unseen=true. Opcjonalny parametr ?unseennie działa dla mnie. chociaż wypróbowałem wszystkie poprawki z tej dyskusji. Czy mógłbyś pomóc z właściwym ciągiem ścieżki, który sobie z tym poradzi? Z góry dziękuję!
Khrystyna Skvarok
Cześć @KhrystynaSkvarok, czy kiedykolwiek wymyśliłeś, jak uzyskać ścieżkę z opcjonalnym ciągiem zapytania działającym? Próbuję zrobić to samo
sabliao
2
@sabliao Hi! Nie mam działającego przykładu, ale dla adresu URL takiego jak example.com/search?query=testspróbuj użyć następnego wzorca /:search(search).
Khrystyna Skvarok
Jak mogę uzyskać parametry z adresu URL po separatorze?
PHP Ninja
15

Działająca składnia dla wielu opcjonalnych parametrów:

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

Teraz adres URL może być:

  1. /Sekcja
  2. / sekcja / strona / 1
  3. / section / page / 1 / sort / asc
Nebojsa Sapic
źródło
1

dla routera z reakcją V5 i nowszych użyj poniższej składni dla wielu ścieżek

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
Nishant Singh
źródło