javascript - Get query string value in React JS - Stack Overflow

admin管理员组

文章数量:1328972

I am having URL as

I need to fetch value of code. Below is my code:

import React from 'react';
import { useEffect } from 'react';

const Callback = () => {
useEffect(() => {
    console.log("hiii");
    
}, []);

return (
    <React.Fragment>
        Callback
    </React.Fragment>
);
};

export default Callback;

Please confirm how can I fetch that. Thanks in advance.

I am having URL as http://example./callback?code=abcd

I need to fetch value of code. Below is my code:

import React from 'react';
import { useEffect } from 'react';

const Callback = () => {
useEffect(() => {
    console.log("hiii");
    
}, []);

return (
    <React.Fragment>
        Callback
    </React.Fragment>
);
};

export default Callback;

Please confirm how can I fetch that. Thanks in advance.

• javascript
• reactjs
• react-hooks
• query-string

Share Improve this question Follow edited Oct 1, 2020 at 11:12 norbitrial 15.2k1010 gold badges3939 silver badges6464 bronze badges asked Oct 1, 2020 at 9:50 Dilpreet KaurDilpreet Kaur 10744 silver badges1010 bronze badges 1

• your link not found – Anhdevit Commented Oct 1, 2020 at 10:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Probably the best way is to use the useParams hook because you have a functional ponent. Read from the documentation as the following:

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

I would suggest the following:

import React from 'react'
import { useParams } from 'react-router-dom'

const Callback = () => {
   let { code } = useParams()

   console.log({ code });

   return (
      <React.Fragment>
          Callback
      </React.Fragment>
   )
};

---

+1 from documentation:

You need to be using React >= 16.8 in order to use any of these hooks!

use this library 'query-string' and use as

import queryString from 'query-string';

in constructor

  constructor(props) {
    const { location: { search } } = props;
    const parsed = queryString.parse(search);
     this.state = {
      code: parsed.code,
       }
   }

hope it will solve your problem !

You can use the URLSearchParams interface to fetch the query string of a URL. https://developer.mozilla/en-US/docs/Web/API/URLSearchParams

const queryParams = new URLSearchParams(window.location.search);
const code = queryParams.get("code");

First at App.js you should have react-router-dom

import { Route, Switch } from "react-router-dom";

Then inside switch you can define route parameters like in your case

<Route exact path="/callback/:code" ponent={YourComponentsName} />

At the ponents file you can get the parameters from the props

Functional Component

const code = props.match.params.code

Class Component

 const code = this.props.match.params.code

Or next approach

const code = new URLSearchParams(this.props.location.search);    

const code = query.get('code')

console.log(code)//abcd

You need to use a hook...

useEffect(() => {
  let urlParams = new URLSearchParams(window.location.search);
  console.log(urlParams.code || "empty");
}, []);

本文标签： javascriptGet query string value in React JSStack Overflow