Querystring in react-router

后端 未结 2 1782
小蘑菇
小蘑菇 2021-02-07 00:39

I am trying to set a Route path with a query string. Something in the lines of:

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


        
相关标签:
2条回答
  • 2021-02-07 01:06

    If you are using React Router v2.xx, you can access the query parameters via the location.query object passed in to your Route component.

    In other words, you could rework your route to look like the following:

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

    And then inside your SearchResults component, use this.props.location.query.query1 (similar for query2 and query3) to access the query parameter values.

    EDIT: This is still the case for React Router v3.xx.

    0 讨论(0)
  • 2021-02-07 01:22

    If you're using React Router >= v4 location.query is not available anymore. You can plug-in an external library (like https://www.npmjs.com/package/query-string), or use something like this:

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

    (just keep in mind that URLSearchParams() is not supported by Internet Explorer)

    0 讨论(0)
提交回复
热议问题