Nhiều tên đường dẫn cho một thành phần tương tự trong Phản ứng Router

Question

Tôi đang sử dụng các thành phần tương tự 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> 

Liệu có cách nào để kết hợp nó, để được như:

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

Answer 1

tôi không nghĩ rằng nó là không may.

Bạn có thể sử dụng một map như bạn sẽ làm gì với bất kỳ thành phần JSX khác mặc dù:

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

Answer 2

Theo Phản ứng Router docs các proptype 'path' là kiểu string .so không có cách nào bạn có thể vượt qua một mảng làm đạo cụ cho Thành phần tuyến đường.

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

Answer 3

Ít nhất với phản ứng-router v4 các path có thể là một chuỗi biểu thức chính quy, vì vậy bạn có thể làm điều gì đó như thế này:

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

như bạn có thể thấy đó là một chút dài dòng vì vậy nếu bạn component/route là đơn giản như thế này có lẽ không có giá trị nó.

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 thành phần bao gói tham số paths mảng, có thể dùng lại regex hoặc .map logic.