如何从查询字符串中获取参数值？

Question

如何在我的 routes.jsx 文件中定义路由，以便在从其服务器重定向后，从 Twitter 的单点登录过程生成的 URL 中捕获__firebase_request_key参数值？

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

我尝试使用以下路由配置，但:redirectParam没有捕捉到提到的参数：

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Answer 1

React Router v6，使用钩子

在 react-router-dom v6 中有一个名为useSearchParams的新钩子。 所以随着

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

你会得到"blablabla" 。 请注意，searchParams 是 URLSearchParams 的一个实例，它还实现了一个迭代器，例如用于使用 Object.fromEntries 等。

React Router v4/v5，没有钩子，通用

React Router v4 不再为您解析查询，但您只能通过this.props.location.search （或 useLocation，见下文）访问它。 原因见nbeuchat 的回答。

例如，将qs库作为qs导入，您可以这样做

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

另一个库是query-string 。 有关解析搜索字符串的更多想法，请参阅此答案。 如果您不需要IE 兼容性，您也可以使用

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

对于功能组件，您可以将this.props.location替换为钩子useLocation 。 请注意，您可以使用window.location.search ，但这不允许在更改时触发 React 渲染。 如果您的（非功能性）组件不是Switch的直接子组件，则需要使用withRouter来访问路由器提供的任何道具。

反应路由器 v3

React Router 已经为您解析了位置并将其作为道具传递给您的RouteComponent 。 您可以通过以下方式访问查询（在 URL 中的 ? 之后）部分

this.props.location.query.__firebase_request_key

如果您正在查找路径参数值，在路由器内部用冒号 (:) 分隔，可以通过以下方式访问这些值

this.props.match.params.redirectParam

这适用于 React Router v3 的后期版本（不确定是哪个版本）。 据报道，较旧的路由器版本使用this.props.params.redirectParam 。

一般的

nizam.sp 的建议

console.log(this.props)

在任何情况下都会有所帮助。

Answer 2

反应路由器 v4

使用component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

组件会使用 route 道具自动呈现。

使用render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

路由道具被传递给渲染函数。

Answer 3

反应路由器 v3

使用 React Router v3，您可以从this.props.location.search (?qs1=naisarg&qs2=parmar) 获取查询字符串。 例如，使用let params = queryString.parse(this.props.location.search) ，将给出{ qs1 : 'naisarg', qs2 : 'parmar'}

反应路由器 v4

使用 React Router v4， this.props.location.query不再存在。 您需要改用this.props.location.search并自己解析查询参数或使用现有包（例如query-string ）。

例子

这是一个使用 React Router v4 和query-string库的最小示例。

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);

合理的

React Router 团队移除query属性的理由是：

有许多流行的包在查询字符串解析/字符串化方面略有不同，这些差异中的每一个对于某些用户来说可能是“正确”的方式，而对于其他用户来说可能是“不正确的”方式。 如果 React Router 选择了“正确”的那个，那它只适合某些人。 然后，它需要为其他用户添加一种方法来替代他们喜欢的查询解析包。 React Router 对搜索字符串的内部使用没有要求它解析键值对，因此它不需要选择其中哪一个应该是“正确的”。

[...]

4.0 采用的方法是去掉所有“包含电池”的特性，回到基本路由。 如果您需要查询字符串解析或异步加载或 Redux 集成或其他非常具体的东西，那么您可以将其添加到专门针对您的用例的库中。 你不需要的东西更少，你可以根据你的特定偏好和需求定制东西。

你可以在GitHub 上找到完整的讨论。

Answer 4

据我所知，您可以通过三种方法做到这一点。

1.使用正则表达式获取查询字符串。

2.可以使用浏览器api。 图片当前网址是这样的：

http://www.google.com.au?token=123

我们只想得到 123；

第一的

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

然后

const token = query.get('token')
console.log(token)//123

3. 使用名为“查询字符串”的第三个库。 首先安装它

npm i query-string

然后将其导入到当前的 javascript 文件中：

 import queryString from 'query-string'

下一步是在当前 url 中获取 'token'，执行以下操作：

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

希望能帮助到你。

更新于 25/02/2019

4. 如果当前 url 如下所示：

http://www.google.com.au?app=home&act=article&aid=160990

我们定义一个函数来获取参数：

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

我们可以通过以下方式获得“援助”：

getQueryVariable('aid') //160990

Answer 5

React Router v4 不再有props.location.query对象（参见github讨论）。 因此，接受的答案不适用于较新的项目。

v4 的解决方案是使用外部库查询字符串来解析props.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Answer 6

使用 React 钩子时，无法访问this.props.location 。 要捕获 url 参数，请使用window对象。

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

Answer 7

反应路由器 5.1+

5.1 引入了各种钩子，例如useLocation和useParams可以在这里使用。

例子：

<Route path="/test/:slug" component={Dashboard} />

然后如果我们访问说

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

你可以像这样检索它

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Answer 8

有了这个单行，你可以在 React Hook 和 React 类组件中的任何地方使用纯 JavaScript。

https://www.hunterisgod.com/?city=莱比锡

let city = (new URLSearchParams(window.location.search)).get("city")

Answer 9

反应路由器 v4

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

请注意，它目前是实验性的。

在此处检查浏览器兼容性： https ://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

Answer 10

http://localhost:8000/#/signin?id=12345

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

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

Answer 11

您可以检查react-router ，简单地说，只要您在路由器中定义，您就可以使用代码获取查询参数：

this.props.params.userId

Answer 12

如果你的路由器是这样的

<Route exact path="/category/:id" component={ProductList}/>

你会得到这样的id

this.props.match.params.id

Answer 13

不是反应方式，但我相信这个单行功能可以帮助你:)

const getQueryParams = (query = null) => (query||window.location.search.replace('?','')).split('&').map(e=>e.split('=').map(decodeURIComponent)).reduce((r,[k,v])=>(r[k]=v,r),{});

例子：
网址： ...?a=1&b=c&d=test
代码：

getQueryParams()
//=> {a: "1", b: "c", d: "test"}

getQueryParams('type=user&name=Jack&age=22')
//=> {type: "user", name: "Jack", age: "22" }

Answer 14

说有一个url如下

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

如果我们想从该 URL 中提取代码，下面的方法将起作用。

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

Answer 15

无需 3rd 方库或复杂的解决方案即可完成所有操作。 这是如何

let myVariable = new URLSearchParams(history.location.search).get('business');

您唯一需要更改的是带有您自己的参数名称的“业务”一词。

例如 url.com?business=hello

myVariable 的结果将是 hello

Answer 16

反应路由器 Dom V6 https://reactrouter.com/docs/en/v6/hooks/use-search-params

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

直到 React 路由器 Dom V5

function useQueryParams() {
    const params = new URLSearchParams(
      window ? window.location.search : {}
    );

    return new Proxy(params, {
        get(target, prop) {
            return target.get(prop)
        },
    });
}

React 钩子很棒

如果您的网址看起来像/users?page=2&count=10&fields=name,email,phone

// app.domain.com/users?page=2&count=10&fields=name,email,phone

const { page, fields, count, ...unknown } = useQueryParams();

console.log({ page, fields, count })
console.log({ unknown })

如果您的查询参数包含连字符（“-”）或空格（“”），那么您不能像{ page, fields, count, ...unknown }

您需要执行传统的任务，例如

// app.domain.com/users?utm-source=stackOverFlow

const params = useQueryParams();

console.log(params['utm-source']);

Answer 17

如果您没有得到this.props ...您根据其他答案所期望的，您可能需要使用withRouter ( docs v4 )：

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Answer 18

我很难解决这个问题。 如果上述方法都不起作用，您可以试试这个。 我正在使用 create-react-app

要求

react-router-dom": "^4.3.1"

解决方案

在指定路由器的位置

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

像这样添加您要传入的参数名称

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

在您渲染一些/路径的页面上，您可以指定它以查看参数名称调用ID，如下所示

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

在您导出默认值的最后

export default withRouter(Component);

记得包含导入

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

当 console.log(this.props) 你将能够传递什么。 玩得开心！

Answer 19

React Router v5.1引入了 hooks：

为了

<Route path="/posts/:id">
  <BlogPost />
</Route>

您可以使用 hook 访问 params / id：

const { id } = useParams();

更多在这里。

Answer 20

实际上没有必要使用 3rd 方库。 我们可以用纯 JavaScript 制作。

考虑以下 URL：

https://example.com?yourParamName=yourParamValue

现在我们得到：

const url = new URL(window.location.href);
const yourParamName = url.searchParams.get('yourParamName');

简而言之

const yourParamName = new URL(window.location.href).searchParams.get('yourParamName')

另一种智能解决方案（推荐）

const params = new URLSearchParams(window.location.search);
const yourParamName = params.get('yourParamName');

简而言之

const yourParamName = new URLSearchParams(window.location.search).get('yourParamName')

笔记：

对具有多个值的参数使用“getAll”而不是“get”

https://example.com?yourParamName[]=yourParamValue1&yourParamName[]=yourParamValue2

const yourParamName = new URLSearchParams(window.location.search).getAll('yourParamName[]')

结果将如下所示：

["yourParamValue1", "yourParamValue2"]

Answer 21

尝试这个

http://localhost:4000/#/amoos?id=101

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

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



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

Answer 22

从 v4 开始的React router不再直接在其location对象中为您提供query params 。 原因是

有许多流行的包在查询字符串解析/字符串化方面略有不同，这些差异中的每一个对于某些用户来说可能是“正确”的方式，而对于其他用户来说可能是“不正确的”方式。 如果 React Router 选择了“正确”的那个，那它只适合某些人。 然后，它需要为其他用户添加一种方法来替代他们喜欢的查询解析包。 React Router 对搜索字符串的内部使用没有要求它解析键值对，因此它不需要选择其中哪一个应该是“正确的”。

包括了这一点后，只在需要查询对象的视图组件中解析 location.search 会更有意义。

您可以通过从react-router覆盖withRouter来一般地做到这一点

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

Answer 23

this.props.params.your_param_name将起作用。

这是从查询字符串中获取参数的方法。
请做console.log(this.props); 探索所有的可能性。

Answer 24

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Answer 25

也许有点晚了，但这个反应钩子可以帮助你在 URL 查询中获取/设置值： https ://github.com/rudyhuynh/use-url-search-params（由我编写）。

它可以在有或没有react-router情况下使用。 以下是您的案例中的代码示例：

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

Answer 26

您可以使用以下反应挂钩：

1. 如果 url 更改，则挂钩状态更新
2. SSR : typeof window === "undefined" ，只是检查window会导致错误（试试看）
3. Proxy对象隐藏了实现，所以返回的是undefined而不是null

所以这是将搜索参数作为对象的函数：

const getSearchParams = <T extends object>(): Partial<T> => {
    // server side rendering
    if (typeof window === "undefined") {
        return {}
    }

    const params = new URLSearchParams(window.location.search) 

    return new Proxy(params, {
        get(target, prop, receiver) {
            return target.get(prop as string) || undefined
        },
    }) as T
}

然后像这样使用它作为钩子：

const useSearchParams = <T extends object = any>(): Partial<T> => {
    const [searchParams, setSearchParams] = useState(getSearchParams())

    useEffect(() => {
        setSearchParams(getSearchParams())
    }, [typeof window === "undefined" ? "once" : window.location.search])

    return searchParams
}

如果您的网址如下所示：

/app?page=2&count=10

你可以这样读：

const { page, count } = useQueryParams();

console.log(page, count)

Answer 27

反应路由器 v6

来源： 在 React Router 中获取查询字符串（搜索参数）

使用新的useSearchParams钩子和.get()方法：

const Users = () => {
  const [searchParams] = useSearchParams();
  console.log(searchParams.get('sort')); // 'name'

  return <div>Users</div>;
};

使用这种方法，您可以读取一个或几个参数。

BONUS 获取参数作为对象：

如果您需要一次获取所有查询字符串参数，那么我们可以像这样使用Object.fromEntries ：

const Users = () => {
  const [searchParams] = useSearchParams();
  console.log(Object.fromEntries([...searchParams])); // ▶ { sort: 'name', order: 'asecnding' }
  return <div>Users</div>;
};

阅读更多和现场演示： 在 React Router 中获取查询字符串（搜索参数）

Answer 28

您可以创建简单的钩子来从当前位置提取搜索参数：

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

然后你可以像这样在你的功能组件中使用它：

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

Answer 29

也许有人可以帮助澄清原因，但如果你试图从 App.js 页面上全新安装的 Create React App 中点击道具来查找位置，你会得到：

TypeError：无法读取未定义的属性“搜索”

即使我有 App.js 作为主路由：

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

仅在 App.js 上，使用 window.location 对我有用：

import queryString from 'query-string';
...
const queryStringParams = queryString.parse(window.location.search);

Answer 30

在需要访问参数的组件中可以使用

this.props.location.state.from.search

这将显示整个查询字符串（ ?符号之后的所有内容）

Answer 31

我使用了一个名为 query-string 的外部包来解析 url 参数。

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Answer 32

当您使用 react route dom 时，将使用 for match 清空对象，但如果您执行以下代码，那么它将适用于 es6 组件以及它直接适用于功能组件

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

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

这样您就可以获得道具并匹配参数和配置文件ID

在对 es6 组件进行了大量研究之后，这对我有用。

Answer 33

在打字稿中，请参见下面的片段，例如：

const getQueryParams = (s?: string): Map<string, string> => {
  if (!s || typeof s !== 'string' || s.length < 2) {
    return new Map();
  }

  const a: [string, string][] = s
    .substr(1) // remove `?`
    .split('&') // split by `&`
    .map(x => {
      const a = x.split('=');
      return [a[0], a[1]];
    }); // split by `=`

  return new Map(a);
};

与react-router-dom ，你可以做

const {useLocation} from 'react-router-dom';
const s = useLocation().search;
const m = getQueryParams(s);

见下面的例子

 // below is the transpiled and minified ts functions from above const getQueryParams=t=>{if(!t||"string"!=typeof t||t.length<2)return new Map;const r=t.substr(1).split("&").map(t=>{const r=t.split("=");return[r[0],r[1]]});return new Map(r)}; // an example query string const s = '?arg1=value1&arg2=value2' const m = getQueryParams(s) console.log(m.get('arg1')) console.log(m.get('arg2')) console.log(m.get('arg3')) // does not exist, returns undefined

Answer 34

在 React Router v4 中，只有 withRoute 是正确的方法

您可以通过 withRouter 高阶组件访问历史对象的属性和最接近的匹配项。 withRouter 将在渲染时将更新的匹配、位置和历史道具传递给包装的组件。

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

Answer 35

使用let { redirectParam } = useParams(); 如果您使用的是功能组件

这是一个类组件

constructor (props) {  
        super(props);
        console.log(props);
        console.log(props.match.params.redirectParam)
}
async componentDidMount(){ 
        console.log(this.props.match.params.redirectParam)
}

Answer 36

或者可能是这样的？

 let win = { 'location': { 'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla' } } if (win.location.path.match('__firebase_request_key').length) { let key = win.location.path.split('__firebase_request_key=')[1] console.log(key) }

Answer 37

在 React-Router-Dom V5 中

function useQeury() {
 const [query, setQeury] = useState({});
 const search = useLocation().search.slice(1);

 useEffect(() => {
   setQeury(() => {
     const query = new URLSearchParams(search);
     const result = {};
     for (let [key, value] of query.entries()) {
       result[key] = value;
     }
     setQeury(result);
   }, [search]);
 }, [search, setQeury]);

 return { ...query };
}


// you can destruct query search like:
const {page , search} = useQuery()

// result
// {page : 1 , Search: "ABC"}

Answer 38

如果您的路线定义是这样的：

<Route exact path="/edit/:id" ...../>

import { useParams } from "react-router";

const { id } = useParams();

console.log(id)

Answer 39

你可以使用这个用Typescript编写的简单钩子：

const useQueryParams = (query: string = null) => {      
    const result: Record<string, string> = {};
    new URLSearchParams(query||window.location.search).forEach((value, key) => {
      result[key] = value;
    });
    return result;
}

用法：

// http://localhost:3000/?userId=1889&num=112
const { userId, num } = useQueryParams();
// OR
const params = useQueryParams('userId=1889&num=112');

Answer 40

您可以使用此代码获取参数作为 object。 如果 url 中没有查询参数，则 object 将为空

 let url = window.location.toString(); let params = url?.split("?")[1]?.split("&"); let obj = {}; params?.forEach((el) => { let [k, v] = el?.split("="); obj[k] = v.replaceAll("%20", " "); }); console.log(obj);

Answer 41

最接受的答案中的链接已失效，因为 SO 不允许我发表评论，对于 ReactRouter v6.3.0，您可以使用Params hook

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

Answer 42

URLSearchParams的简单解构赋值

测试尝试如下：

1 转到： https://www.google.com/?param1=apple&param2=banana

2 Right click页面 > 单击Inspect > 转到Console选项卡
然后粘贴以下代码：

const { param1, param2 } = Object.fromEntries(new URLSearchParams(location.search));
console.log("YES!!!", param1, param2 );

Output：

YES!!! apple banana

您可以将param1 、 param2等参数扩展到我们喜欢的任意数量。

Answer 43

您可以使用以下命令查看查询：

console.log(this.props.location.query)

Answer 44

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

Answer 45

您还可以使用react-location-query包，例如：

  const [name, setName] = useLocationField("name", {
    type: "string",
    initial: "Rostyslav"
  });

  return (
    <div className="App">
      <h1>Hello {name}</h1>
      <div>
        <label>Change name: </label>
        <input value={name} onChange={e => setName(e.target.value)} />
      </div>
    </div>
  );

name - 获取值 setName = 设置值

这个包有很多选项， 在 Github 上的文档中阅读更多

Answer 46

let data = new FormData();
data.append('file', values.file);

Answer 47

---

最简单的解决方案！

在路由中：

   <Route path="/app/someUrl/:id" exact component={binder} />

在反应代码中：

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }