Tôi muốn khai báo một đường dẫn với một tham số đường dẫn tùy chọn, do đó khi tôi thêm nó vào trang để làm điều gì đó thêm (ví dụ: điền một số dữ liệu):

http: // localhost / app / path / to / page <= kết xuất trang http: // localhost / app / path / to / page / pathParam <= kết xuất trang với một số dữ liệu theo pathParam

Trong bộ định tuyến phản ứng của tôi, tôi có các đường dẫn sau, để hỗ trợ hai tùy chọn (đây là một ví dụ đơn giản):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Câu hỏi của tôi là, chúng ta có thể khai báo nó trong một tuyến đường không? Nếu tôi chỉ thêm hàng thứ hai thì tuyến không có tham số sẽ không được tìm thấy.

EDIT # 1:

Giải pháp được đề cập ở đây về cú pháp sau đây không hiệu quả với tôi, liệu nó có đúng không? Có tồn tại trong tài liệu?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Phiên bản bộ định tuyến phản ứng của tôi là: 1.0.3

Bản chỉnh sửa bạn đã đăng là hợp lệ cho phiên bản cũ hơn của React-router (v0.13) và không hoạt động nữa.

Phản ứng Bộ định tuyến v1, v2 và v3

Vì phiên bản 1.0.0bạn xác định các tham số tùy chọn với:

<Route path="to/page(/:pathParam)" component={MyPage} />

và cho nhiều tham số tùy chọn :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Bạn sử dụng dấu ngoặc đơn ( )để bọc các phần tùy chọn của tuyến đường, bao gồm dấu gạch chéo hàng đầu ( /). Kiểm tra trang Hướng dẫn kết hợp tuyến đường của tài liệu chính thức.

Lưu ý: Các :paramNamethông số phù hợp với một phân khúc URL đến tiếp theo /, ?hoặc #. Để biết thêm về đường dẫn và thông số cụ thể, đọc thêm ở đây .

React Router v4 trở lên

React Router v4 khác về cơ bản so với v1-v3 và các tham số đường dẫn tùy chọn không được xác định rõ ràng trong tài liệu chính thức .

Thay vào đó, bạn được hướng dẫn xác định một paththam số mà đường dẫn đến regrec hiểu. Điều này cho phép linh hoạt hơn nhiều trong việc xác định đường dẫn của bạn, chẳng hạn như lặp lại các mẫu, ký tự đại diện, v.v. Vì vậy, để xác định một tham số là tùy chọn, bạn thêm dấu chấm hỏi (? ).

Như vậy, để xác định một tham số tùy chọn, bạn làm:

<Route path="/to/page/:pathParam?" component={MyPage} />

và cho nhiều tham số tùy chọn :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Lưu ý: React Router v4 không tương thích vớiphản ứng-bộ định tuyến-rơle( đọc thêm ở đây ). Sử dụng phiên bản v3 trở về trước (khuyến nghị v2).

Đối với bất kỳ người dùng React Router v4 nào đến đây sau khi tìm kiếm, các tham số tùy chọn trong một <Route>được biểu thị bằng ?hậu tố.

Đây là tài liệu liên quan:

https://reacttraining.com/react-router/web/api/Route/path- chuỗi

đường dẫn: chuỗi

Bất kỳ đường dẫn URL hợp lệ nào mà đường dẫn đến regrec đều hiểu.

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regEx#optional

Không bắt buộc

Các tham số có thể được thêm vào bằng dấu chấm hỏi (?) Để làm cho tham số tùy chọn. Điều này cũng sẽ làm cho tiền tố tùy chọn.

Ví dụ đơn giản về một phần được phân trang của một trang web có thể được truy cập có hoặc không có số trang.

<Route path="/section/:page?" component={Section} />

Cú pháp làm việc cho nhiều thông số tùy chọn:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Bây giờ, url có thể là:

1. /phần
2. / phần / trang / 1
3. / phần / trang / 1 / sắp xếp / asc

cho bộ định tuyến phản ứng V5 trở lên sử dụng cú pháp dưới đây cho nhiều đường dẫn

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