Wiele nazw ścieżek dla tego samego komponentu w React Router

115

Używam tego samego komponentu dla trzech różnych tras:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

Czy w ogóle da się to połączyć, aby wyglądało jak:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>
javascript reactjs path react-router url-routing Chetan Garg
źródło
2
Począwszy odreak-router 4.4.0, możesz teraz określić tablicę ścieżek w sposób bardzo podobny do swojej sugestii. Zobacz moją odpowiedź tutaj .
Ben Smith

Odpowiedzi:

141

W wersji 4.4.0-beta.4 , a także oficjalnie w wersji 5.0.0, możesz teraz określić tablicę ścieżek, które prowadzą do komponentu, np.

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

Każda ścieżka w tablicy jest ciągiem wyrażenia regularnego.

Dokumentację tego podejścia można znaleźć tutaj .

Ben Smith
źródło
5
Uważam, że to najlepsza odpowiedź. Odpowiedź @Cameron i tak nie obsługuje pełnej funkcji regexp (przynajmniej nie byłem w stanie tego zrobić).
Christopher Regner
2
Jak ustawić exactatrybut dla pojedynczej ścieżki?
JulianSoto
1
@JulianSoto Utwórz trasę do komponentu z jedną ścieżką wraz z dokładną ścieżką. Następnie możesz utworzyć inną trasę do tego samego składnika z tablicą ścieżek bez dokładnego atrybutu.
Ben Smith
Nie mogę yarn upgradeod 4,3 do 4,4. Czy jest oficjalnie wydany?
ndtreviv
@ndtreviv Patrząc na dziennik zmian routera, widzę, że funkcja została wprowadzona w wersji 4.4.0 Beta 4. Polecam aktualizację do najnowszej wersji, która w chwili pisania jest to 5.5.0. Możesz to zrobić, uruchamiając „yarn upgrade react-router --latest”
Ben Smith
115

Przynajmniej zreak-router v4 pathmoże to być ciąg wyrażenia regularnego, więc możesz zrobić coś takiego:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

Jak widać, jest to trochę rozwlekłe, więc jeśli twoje component/ routejest takie proste, prawdopodobnie nie jest tego warte.

I oczywiście, jeśli zdarza się to często, zawsze można utworzyć komponent opakowujący, który pobiera pathsparametr tablicy , który umożliwia .mapwielokrotne użycie wyrażenia regularnego lub logiki.

Cameron
źródło
5
Świetny pomysł @Cameron. Zauważyłem, że warto go nieco zmodyfikować, aby dopasować tylko ścieżki zaczynające się od jednej z grup: /^\/(home|users|widgets)/ Teraz /widgetsbędzie pasować, ale /dashboard/widgetsnie będzie pasować.
Towler
4
Powinno być świetne, ale na razie typ wyrażenia regularnego nie jest poprawny przy sprawdzaniu poprawności typów Warning: Failed prop type: Invalid prop właściwości : ścieżka` typu regexpdostarczonego do Route, oczekiwano string.`
Fábio Paiva
@ FábioPaiva tak, nadal nie wiem, jak umieścić dowolne wyrażenie regularne w trasie
Atav32,
1
umieść to jako ciąg<Route path="/(new|edit)/user/:id?" ... />
medv
2
nie współpracuje zpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}
Murtaza Hussain
43

Nie sądzę, aby tak było, jeśli używasz wersji React Router niższej niż v4.

Możesz jednak użyć maptak, jak w przypadku każdego innego komponentu JSX:

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

EDYTOWAĆ

Możesz również użyć wyrażenia regularnego jako ścieżki w React-router v4, o ile jest obsługiwane przez ścieżkę do wyrażenia regularnego . Zobacz odpowiedź @ Cameron, aby uzyskać więcej informacji.

Christopher Chiche
źródło
3
Nie zapomnij o keyrekwizycie.
Neurotransmiter
9
zauważ, że spowodowałoby to (niepożądane ...?)
ponowne montowanie
W rzeczy samej! Pożądanie zależy prawdopodobnie od przypadku użycia i komponentów. Jeśli nie chcesz montować ponownie, użycie wyrażenia regularnego, jak wskazano w mojej edycji, może działać lepiej.
Christopher Chiche
6

Począwszy od React-route-dom v5.1.2 można przejść przez wiele ścieżek, jak poniżej

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

I oczywiście musisz zaimportować plik Home jsx na górze.

Abhishek
źródło
4

Inna opcja: użyj prefiksu trasy. /pagesna przykład. Dostaniesz

  • /pages/home
  • /pages/users
  • /pages/widgets

A następnie rozwiąż to szczegółowo w Homekomponencie.

<Router>
  <Route path="/pages/" component={Home} />
</Router>
arturtr
źródło
0

Zgodnie z dokumentacją React Router, proptype 'path' jest typu string, więc nie ma sposobu, aby przekazać tablicę jako właściwości do komponentu Route.

Jeśli chcesz zmienić tylko trasę, możesz użyć tego samego komponentu dla innej trasy, nie ma z tym problemów

Vijaykrish93
źródło
1
Ta odpowiedź nie jest już poprawna, ponieważ ścieżka akceptuje teraz tablicę ciągów. Zobacz tę odpowiedź .
Ben Smith
-1

W przypadku reagowania-routera v4.4 możesz po prostu zrobić coś takiego poniżej.

zapisz ścieżkę w zmiennej i przekaż ją poniżej i użyj '|' Operator.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} />

więc dla wszystkich pasujących ścieżek będzie renderować zgodnie z component={Home}twoimi potrzebami.

Nischith
źródło