Chuỗi truy vấn trong bộ phản ứng-router

Question

Tôi đang cố đặt đường dẫn Tuyến bằng chuỗi truy vấn. Một cái gì đó trong dòng:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3 

tôi sẽ hơn chuyển đổi sang "Kết quả" thành phần như sau:

<Route path="/" component={Main}> 
    <IndexRoute component={Home} /> 
    <Route path="results?query1=:query1&query2=:query2&query3=:query3" 
    component={SearchResults} /> 
</Route> 

Trong container searchresults Tôi muốn để có thể có quyền truy cập làm query1, query2 và tham số query3.

Tôi chưa thể làm cho nó hoạt động. Tôi nhận được lỗi sau:

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

Tôi thử làm theo các bước trong hướng dẫn sau đây: (Mục: Thế còn các thông số chuỗi truy vấn) https://www.themarketingtechnologist.co/react-router-an-introduction/

Tôi có thể nhận được một số trợ giúp ở đây?

Answer 1

Nếu bạn đang sử dụng Bộ định tuyến phản ứng v2.xx, bạn có thể truy cập thông số truy vấn qua đối tượng location.query được chuyển vào thành phần Tuyến đường của bạn.

Nói cách khác, bạn có thể làm lại tuyến đường của bạn để trông giống như sau:

<Route path="results" component={SearchResults} /> 

Và sau đó bên trong thành phần SearchResults của bạn, sử dụng this.props.location.query.query1 (tương tự cho query2 và query3) để truy cập các giá trị tham số truy vấn.

EDIT: Đây vẫn là trường hợp của React Router v3.xx.

Answer 2

Nếu bạn đang sử dụng Bộ định tuyến phản ứng> = v4 location.query không còn khả dụng nữa. Bạn có thể plug-in một thư viện bên ngoài (như https://www.npmjs.com/package/query-string), hoặc sử dụng một cái gì đó như thế này:

const search = props.location.search; // could be '?foo=bar' 
const params = new URLSearchParams(search); 
const foo = params.get('foo'); // bar 

(chỉ cần ghi nhớ rằng URLSearchParams() không supportd trong Internet Explorer)