React - How to get parameter value from query string?

后端 未结 30 1694
温柔的废话
温柔的废话 2020-11-22 10:22

How can I define a route in my routes.jsx file to capture the __firebase_request_key parameter value from a URL generated by Twitter\'s single sign on process a

相关标签:
30条回答
  • 2020-11-22 10:46

    I had a hard time solving this issue. If none of the above work you can try this instead. I am using the create-react-app

    Requirements

    react-router-dom": "^4.3.1"

    Solution

    At the location where router is specified

    <Route path="some/path" ..../>
    

    Add the parameter name that you would want to pass in like this

    <Route path="some/path/:id" .../>
    

    At the page where you are rendering some/path you can specify this to view the parameter name call id like this

    componentDidMount(){
      console.log(this.props);
      console.log(this.props.match.params.id);
    }
    

    At the end where you export default

    export default withRouter(Component);
    

    Remember to include import

    import { withRouter } from 'react-router-dom'
    

    When console.log(this.props) you would be able what has been passed down. Have fun!

    0 讨论(0)
  • 2020-11-22 10:47

    you can check the react-router, in simple,you can use the code to get query parameter as long as you defined in your router:

    this.props.params.userId
    
    0 讨论(0)
  • 2020-11-22 10:47

    Say there is a url as follows

    http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341

    If we want to extract the code from that URL, below method will work.

    const authResult = new URLSearchParams(window.location.search); 
    const code = authResult.get('code')
    
    0 讨论(0)
  • 2020-11-22 10:47

    Maybe someone can help clarify why but if you're attempting to hit props to find location from a fresh install of Create React App on the App.js page you get:

    TypeError: Cannot read property 'search' of undefined

    Even though I have App.js as the home route:

    <Route exact path='/' render={props => (
    

    On App.js only, using window.location worked for me:

    import queryString from 'query-string';
    ...
    const queryStringParams = queryString.parse(window.location.search);
    
    0 讨论(0)
  • 2020-11-22 10:50

    React Router v4

    const urlParams = new URLSearchParams(this.props.location.search)
    const key = urlParams.get('__firebase_request_key')
    

    Please note that it is currently experimental.

    Check browser compatibility here: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

    0 讨论(0)
  • 2020-11-22 10:51

    React Router v3

    With React Router v3, you can get query-string from this.props.location.search (?qs1=naisarg&qs2=parmar). For example, with let params = queryString.parse(this.props.location.search), would give { qs1 : 'naisarg', qs2 : 'parmar'}

    React Router v4

    With React Router v4, the this.props.location.query does not exist anymore. You need to use this.props.location.search instead and parse the query parameters either by yourself or using an existing package such as query-string.

    Example

    Here is a minimal example using React Router v4 and the query-string library.

    import { withRouter } from 'react-router-dom';
    import queryString from 'query-string';
        
    class ActivateAccount extends Component{
        someFunction(){
            let params = queryString.parse(this.props.location.search)
            ...
        }
        ...
    }
    export default withRouter(ActivateAccount);
    

    Rational

    The React Router's team rational for removing the query property is:

    There are a number of popular packages that do query string parsing/stringifying slightly differently, and each of these differences might be the "correct" way for some users and "incorrect" for others. If React Router picked the "right" one, it would only be right for some people. Then, it would need to add a way for other users to substitute in their preferred query parsing package. There is no internal use of the search string by React Router that requires it to parse the key-value pairs, so it doesn't have a need to pick which one of these should be "right".

    [...]

    The approach being taken for 4.0 is to strip out all the "batteries included" kind of features and get back to just basic routing. If you need query string parsing or async loading or Redux integration or something else very specific, then you can add that in with a library specifically for your use case. Less cruft is packed in that you don't need and you can customize things to your specific preferences and needs.

    You can find the full discussion on GitHub.

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