React Router'da aynı bileşen için birden fazla yol adı

116

Aynı bileşeni üç farklı yol için kullanıyorum:

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

Onu birleştirmenin bir yolu var mı?

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

— Chetan Garg
kaynak

2

React-router 4.4.0'dan itibaren, artık önerinize çok benzer bir şekilde bir dizi yol belirtebilirsiniz. Cevabımı burada görün .

— Ben Smith

142

React -router v4.4.0-beta.4'ten itibaren ve resmi olarak v5.0.0'da, artık bir bileşene çözümlenen bir yol dizisi belirleyebilirsiniz.

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

Dizideki her yol bir normal ifade dizesidir.

Bu yaklaşımın dokümantasyonu burada bulunabilir .

— Ben Smith
kaynak

5

Bunun en iyi cevap olduğuna inanıyorum. @Cameron'un cevabı tam regexp özelliğini desteklemiyor zaten (en azından bunu yapamadım).

— Christopher Regner

2

exactTek bir yol için özniteliği nasıl ayarlarım ?

— JulianSoto

1

@JulianSoto Tek bir yolla birlikte bir bileşene giden bir Rota oluşturun. Daha sonra, tam özniteliği olmayan bir dizi yolla aynı bileşene başka bir Rota oluşturabilirsiniz.

— Ben Smith

yarn upgrade4.3'ten 4.4'e kadar yapamam . Resmen yayınlandı mı?

— ndtreviv

@ndtreviv React yönlendirici değişiklik günlüğüne baktığımda, özelliğin v4.4.0 Beta 4'te kullanıma sunulduğunu görebiliyorum. Yazarken v5.5.0 olan en son sürüme yükseltmenizi tavsiye ederim. Bunu "iplik yükseltme react-yönlendiricisini --en geç" çalıştırarak yapabilirsiniz

— Ben Smith

115

En azından react-router v4 pathile bir düzenli ifade dizesi olabilir, böylece şöyle bir şey yapabilirsiniz:

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

Gördüğünüz gibi biraz ayrıntılı, bu yüzden component/ eğer routeböyle basitse, muhtemelen buna değmeyecektir.

Ve tabii ki bu gerçekten sık sık ortaya çıkarsa, her zaman bir dizi pathsparametresini alan, regex veya .mapmantığı yeniden kullanılabilir bir şekilde yapan bir sarmalama bileşeni oluşturabilirsiniz .

— Cameron
kaynak

5

Harika fikir @Cameron. Sadece gruplardan biriyle başlayan yolları eşleştirmek için biraz değiştirmeyi yararlı buldum: /^\/(home|users|widgets)/ Şimdi /widgetseşleşecek, ancak /dashboard/widgetseşleşmeyecek.

— Towler

4

Harika olmalı, ancak şimdilik tür normal ifadesi prop-tür doğrulamasında geçerli değil: Warning: Failed prop type: Invalid prop yol` türünün regexpsağlandığı Route, bekleniyor string.`

— Fábio Paiva

@ FábioPaiva evet, rotaya rastgele bir

— regex'i

1

dizge olarak koy<Route path="/(new|edit)/user/:id?" ... />

— medv

2

ile çalışmıyorpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Murtaza Hussain

43

React Router'ın v4'ten daha düşük bir sürümünü kullanıyorsanız bunun olacağını sanmıyorum.

mapYine de diğer JSX bileşenlerinde yaptığınız gibi kullanabilirsiniz :

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

DÜZENLE

React-router v4'teki yol için, yol -regexp tarafından desteklendiği sürece bir normal ifade de kullanabilirsiniz . Daha fazla bilgi için @ Cameron'ın cevabına bakın.

— Christopher Chiche
kaynak

3

keyPervaneyi unutma .

— Nörotransmitter

9

bu, yollardan geçiş yaparken (örneğin, / home => / users) yeniden bağlantılara neden olur (istenmeyen ...?)

— Hertzel Guinness

Aslında! Arzu edilebilirlik muhtemelen kullanım durumunuza ve bileşenlerinize bağlıdır. Yeniden bağlanmak istemiyorsanız, düzenlememde belirtildiği gibi regexp kullanmak daha iyi sonuç verebilir.

— Christopher Chiche

6

React-route-dom v5.1.2'den itibaren aşağıdaki gibi birden fazla yolu geçebilirsiniz

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

Ve açık bir şekilde, Home jsx dosyasını üstte içe aktarmanız gerekir.

— Abhishek
kaynak

4

Diğer seçenek: yol önekini kullanın. /pagesÖrneğin. Alacaksın

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

Ve sonra bunu Homebileşenin içinde ayrıntılı bir şekilde çözün .

<Router>
  <Route path="/pages/" component={Home} />
</Router>

— Arturtr
kaynak

0

React Router belgelerine göre, özellik 'yolu' dizge tipindedir. Bu nedenle, bir diziyi Route Bileşenine props olarak geçirmenin bir yolu yoktur.

Niyetiniz yalnızca rotayı değiştirmekse, aynı bileşeni farklı rota için kullanabilirsiniz, bununla ilgili hiçbir sorun yok

— Vijaykrish93
kaynak

1

Yol artık bir dizge dizisini kabul ettiği için bu yanıt artık doğru değil. Bu cevaba bakın .

— Ben Smith

-1

React-router v4.4'ten itibaren aşağıdaki gibi bir şey yapabilirsiniz.

yolu bir değişkende saklayın ve aşağıya aktarın ve '|' kullanın Şebeke.

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

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

böylece eşleştiği tüm yollar için component={Home}sizin ihtiyacınız olanı oluşturacaktır ..

— Nischith
kaynak