在React Router v4中表示URL查詢

Question

我已經看到了其他不同版本的React-Router（pre v4）的其他示例，但我似乎無法找到一種方法來正確表示URL參數。

例如，如果我想將鏈接發送給從搜索朋友因此，它看起來像：
https://yourwebsite.com/search?item-name=youritem

在這種情況下，我知道做出反應，路由器（V4）可以提供可選參數，但他們沒有在URL中表示，那麼您如何才能將確切的請求發送到服務器以獲取信息。

即我發送上面的鏈接給朋友 - >它擊中了服務器，然後數據被填充到組件中。

Answer 1

真的是你必須做的沒有什麼特別的事情，只是設立了Route像這樣：

<Route path="/search" component={MySearchComponent} /> 

這將設置/search路線。然後，訪問傳遞的任何查詢參數，在您的MySearchComponent：

const queryParameters = this.props.location.search; 

的location道具傳遞給組件通過陣營路由器。它包含整個查詢字符串。所以，如果我定位到：

https://myWebsite.com/search?foo=bar&baz=buzz 

然後this.props.location.search將是：

'?foo=bar&baz=buzz' 

這類似於Location.search在現代瀏覽器。接下來，你可以在NPM使用查詢字符串解析庫象內建querystring或任何其他人，甚至是瀏覽器自身的URLSearchParams：

const params = new URLSearchParams(queryParameters); 
const foo = params.get('foo'); //baz 
const baz = params.get('baz'); //buzz 

請注意，這是不支持在Internet Explorer。我建議使用一個NPM庫。