Nhiều tên đường dẫn cho cùng một thành phần trong React Router

113

Tôi đang sử dụng cùng một thành phần cho ba tuyến đường khác nhau:

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

Có cách nào để kết hợp nó không, giống như:

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

— Chetan Garg
nguồn

2

Kể từ react-router 4.4.0, giờ đây bạn có thể chỉ định một mảng đường dẫn theo cách rất giống với đề xuất của bạn. Xem câu trả lời của tôi tại đây .

— Ben Smith

136

Kể từ phiên bản react -router v4.4.0-beta.4 và chính thức trong phiên bản v5.0.0, giờ đây bạn có thể chỉ định một mảng các đường dẫn phân giải thành một thành phần, ví dụ:

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

Mỗi đường dẫn trong mảng là một chuỗi biểu thức chính quy.

Tài liệu cho cách tiếp cận này có thể được tìm thấy ở đây .

— Ben Smith
nguồn

5

Tôi tin rằng đây là câu trả lời tốt nhất. Câu trả lời của @Cameron dù sao cũng không hỗ trợ tính năng regexp đầy đủ (ít nhất là tôi đã không thể làm điều đó).

— Christopher Regner

2

Làm cách nào để đặt exactthuộc tính cho một đường dẫn?

— JulianSoto

1

@JulianSoto Tạo một tuyến đến một thành phần với một đường dẫn duy nhất cùng với đường dẫn chính xác. Sau đó, bạn có thể tạo một Lộ trình khác đến cùng một thành phần với một mảng đường dẫn mà không có thuộc tính chính xác.

— Ben Smith

Tôi không thể yarn upgradetừ 4,3 đến 4,4. Nó có được phát hành chính thức không?

— ndtreviv

@ndtreviv Nhìn vào nhật ký thay đổi bộ định tuyến phản ứng, tôi có thể thấy tính năng này đã được triển khai trong v4.4.0 Beta 4. Tôi khuyên bạn nên nâng cấp lên phiên bản mới nhất, tại thời điểm viết bài này là v5.5.0. Bạn có thể thực hiện việc này khi chạy "bộ định tuyến phản ứng nâng cấp sợi

— Ben Smith,

115

Ít nhất với react-router v4, nó pathcó thể là một chuỗi biểu thức chính quy, vì vậy bạn có thể làm như sau:

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

Như bạn có thể thấy nó hơi dài dòng nên nếu component/ của bạn routeđơn giản như thế này thì có lẽ nó không đáng.

Và tất nhiên nếu điều này thực sự xuất hiện thường xuyên, bạn luôn có thể tạo một thành phần bao bọc lấy pathstham số mảng , tham số này có thể sử dụng lại regex hoặc .maplogic.

— Cameron
nguồn

5

Ý tưởng tuyệt vời @Cameron. Tôi thấy hữu ích khi sửa đổi nó một chút để chỉ khớp với các đường dẫn bắt đầu bằng một trong các nhóm: /^\/(home|users|widgets)/ Bây giờ, /widgetssẽ khớp, nhưng /dashboard/widgetssẽ không khớp.

— Khăn tắm

4

Nên là tuyệt vời, nhưng bây giờ loại regex là không hợp lệ trên xác nhận prop-loại: Warning: Failed prop type: Invalid prop path` loại regexpcung cấp cho Route, dự kiến string.`

— Fábio Paiva

@ FábioPaiva vâng Tôi vẫn chưa tìm ra cách đặt một regex tùy ý trong tuyến đường

— Atav32

1

đặt nó dưới dạng một chuỗi<Route path="/(new|edit)/user/:id?" ... />

— medv

2

không làm việc vớipath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Murtaza Hussain

43

Tôi không nghĩ là như vậy nếu bạn sử dụng phiên bản React Router thấp hơn v4.

Tuy nhiên, bạn có thể sử dụng một mapnhư bạn sẽ làm với bất kỳ thành phần JSX nào khác:

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

BIÊN TẬP

Bạn cũng có thể sử dụng regex cho đường dẫn trong react-router v4 miễn là nó được hỗ trợ bởi đường dẫn đến regexp . Xem câu trả lời của @ Cameron để biết thêm thông tin.

— Christopher Chiche
nguồn

3

Đừng quên chỗ dựa key.

— Neurotransmitter

9

lưu ý rằng điều này sẽ gây ra số tiền (không mong muốn ...?) khi chuyển từ các đường dẫn (ví dụ: / home => / người dùng trong ví dụ đó)

— Hertzel Guinness

Thật! Khả năng mong muốn có thể phụ thuộc vào trường hợp sử dụng của bạn và các thành phần của bạn. Nếu bạn không muốn đếm lại, sử dụng regexp như được chỉ ra trong bản chỉnh sửa của tôi có thể hoạt động tốt hơn.

— Christopher Chiche

5

Kể từ react-route-dom v5.1.2, bạn có thể chuyển nhiều đường dẫn như bên dưới

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

Và chắc chắn bạn cần nhập tệp Home jsx lên trên.

— Abhishek
nguồn

4

Tùy chọn khác: sử dụng tiền tố tuyến đường. /pagesví dụ. Bạn sẽ nhận được

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

Và sau đó giải quyết nó một cách chi tiết bên trong Homethành phần.

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

— arturtr
nguồn

0

Theo tài liệu của React Router, 'đường dẫn' của proptype thuộc loại chuỗi. Vì vậy, không có cách nào bạn có thể chuyển một mảng làm đạo cụ cho Thành phần Route.

Nếu ý định của bạn là chỉ thay đổi tuyến đường, bạn có thể sử dụng cùng một thành phần cho các tuyến đường khác nhau mà không có vấn đề gì với điều đó

— Vijaykrish93
nguồn

1

Câu trả lời này không còn đúng nữa vì đường dẫn hiện chấp nhận một mảng chuỗi. Hãy xem câu trả lời này .

— Ben Smith

-1

Đối với react-router v4.4, bạn chỉ có thể làm như sau.

lưu trữ đường dẫn trong một biến và chuyển xuống bên dưới và sử dụng '|' Nhà điều hành.

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

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

vì vậy đối với tất cả các đường dẫn nó phù hợp, nó sẽ hiển thị component={Home}đó là nhu cầu của bạn ..

— Nischith
nguồn