在 React JS 中获取查询字符串值

Question

我有 URL 作为 http://example.com/callback?code=abcd

我需要获取代码的值。下面是我的代码：

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

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

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

export default Callback;

请确认我如何获取它。提前致谢。

Answer 1

使用这个库'query-string' 并用作

import queryString from 'query-string';

在构造函数中

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

希望它能解决您的问题！

Answer 2

您可以使用 URLSearchParams 接口获取 URL 的查询字符串。 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

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

Answer 3

首先在 App.js 你应该 react-router-dom

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

然后在 switch 中你可以像你的情况一样定义路由参数

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

在组件文件中，您可以从道具中获取参数

功能组件

const code = props.match.params.code

Class 组件

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

或下一个方法

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

const code = query.get('code')

console.log(code)//abcd

Answer 4

可能最好的方法是使用 useParams 挂钩，因为您有一个功能组件。阅读the documentation如下：

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

我建议如下：

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 来自文档：

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

Answer 5

你需要使用钩子...

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

Answer 6

试试这个

http://example.com/callback?code=abcd

// ReactJS
import React from "react";
import { useLocation } from "react-router-dom";

const MyComponent = () => {
    const search = useLocation().search;
    const code = new URLSearchParams(search).get("code");
    console.log(code); //abcd
}



// VanillaJS
const code = window.location.search.split("=")[1];
console.log(code); //abcd

在 React JS 中获取查询字符串值

Get query string value in React JS

javascript

query-string

reactjs

react-hooks