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

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 zprzekaźnik-router-przekaźnik( czytaj więcej tutaj ). Zamiast tego użyj wersji v3 lub wcześniejszej (zalecane v2).

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} />

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

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

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