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

小开

this.props.params.your_param_name将工作。

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

小开

最佳答案

React路由器v6，使用钩子

在react-router-dom v6中，有一个名为搜索参数的新钩子。所以

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

您将获得"blablabla"。请注意，search chParams是URLSearchParams的一个实例，它还实现了一个迭代器，例如用于使用Object.from条目等。

React路由器v4/v5，无钩子，通用

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

例如。使用qs库导入为qs，您可以这样做

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

另一个库将是查询条件。有关解析搜索字符串的更多想法，请参阅这个答案。如果您不需要ie-兼容性，您也可以使用

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

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

React路由器v3

React路由器已经为您解析了位置并将其作为道具传递给您的路由组件。您可以通过

this.props.location.query.__firebase_request_key

如果您正在寻找路径参数值，在路由器内用冒号（：）分隔，这些可通过以下方式访问

this.props.match.params.redirectParam

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

一般

nizam.sp建议做的事

console.log(this.props)

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

小开

您可以查看反应路由器，简单来说，您可以使用代码获取查询参数，只要您在路由器中定义：

this.props.params.userId

小开

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

this.props.location.state.from.search

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

小开

React路由器v4

使用component

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

this.props.match.params.id

该组件与路线道具一起自动呈现。

使用render

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

this.props.match.params.id

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

小开

如果你没有得到this.props…你期望基于其他答案，你可能需要使用withRouter（docsv4）：

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

小开

React路由器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'}

小开

如果你的路由器是这样的

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

你这样会拿到那个id的

this.props.match.params.id

小开

React路由器v3

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

React路由器v4

使用React路由器v4，this.props.location.query不再存在。你需要改用this.props.location.search并自行或使用query-string等现有包解析查询参数。

示例

下面是一个使用React路由器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);

Rational

React路由器团队删除query属性的理由是：

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

[…]

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

您可以在github上找到完整的讨论。

小开

React路由器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

小开

在React路由器v4中，只有with Route是正确的方式

您可以访问历史对象的属性和最接近的匹配通过与路由器高阶组件.与路由器将通过更新的匹配，位置和历史道具包装组件每当它呈现。

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

小开

我使用了一个名为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}));
}

小开

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

有许多流行的包可以查询字符串解析/字符串化略有不同，其中每一个差异可能是一些用户的“正确”方式和“不正确”方式如果React路由器选择了“正确”的一个，它只会是对某些人来说是正确的。然后，它需要为其他人添加一种方式用户在他们首选的查询解析包中替换。有 React路由器没有内部使用需要它的搜索字符串解析键值对，因此它不需要选择哪个其中一个应该是“正确的”。

包括这一点之后，解析视图组件中期待查询对象的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)

小开

最简单的解决方案！

在路由：

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

小开

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

小开

我很难解决这个问题。如果以上都不起作用，你可以试试这个。我使用的是create-react-app

职位要求：

react-router-dom"："3.3.1"，请求参数

解决方案

在指定路由器的位置

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

添加您希望传入的参数名称，如下所示

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

在渲染一些/path的页面上，您可以指定它来查看参数名称调用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）时，你将能够得到已经传下来的东西。玩得开心！

小开

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

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

2.you可以使用浏览器API。图像当前URL如下：

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.使用名为'query-string'的第三个库。首先安装它

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

如果当前url如下所示：

http://www.google.com.au?app=home&； act=文章&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

小开

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

小开

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

小开

也许有点晚了，但这个反应钩子可以帮助您在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>
)
}

小开

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

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

小开

或者像这样的东西？

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

小开

当你使用反应路由dom然后将空对象与匹配，但如果你做下面的代码，那么它将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组件进行了大量研究后，这对我来说很有效。

小开

React路由器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>;
}

小开

有了这个单行代码，您可以在React Hook和React Class Component中的任何地方使用它，并使用纯JavaScript。

https://www.hunterisgod.com/?city=Leipzig

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

小开

说有网址如下

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

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

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

小开

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

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'}

小开

React路由器v5.1引入了钩子：

为

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

您可以使用钩子访问params/id：

const { id } = useParams();

更多这里。

小开

也许有人可以帮助澄清原因，但如果您尝试点击道具以从您获得的App.js页面上的创建React应用程序的新安装中查找位置：

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

尽管我App.js回家的路：

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

仅在App.js，使用window.location为我工作：

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

小开

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

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

小开

您也可以使用反应定位查询包，例如：

  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上的文档

小开

无需第三方库或复杂的解决方案即可在一行中完成所有操作。这是如何

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

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

示例url.com?business=hello

myVariable的结果将是hello

小开

不是反应方式，但我相信这个one-line function可以帮助你：）

const getQueryParams = (query = null) => [...(new URLSearchParams(query||window.location.search||"")).entries()].reduce((a,[k,v])=>(a[k]=v,a),{});

或者这个：

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

或完整版本：

const getQueryParams = (query = null) => {
return (
(query || window.location.search.replace("?", ""))


// get array of KeyValue pairs
.split("&")


// Decode values
.map((pair) => {
let [key, val] = pair.split("=");


return [key, decodeURIComponent(val || "")];
})


// array to object
.reduce((result, [key, val]) => {
result[key] = val;
return result;
}, {})
);
};

示例：
URL：...?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" }

小开

React路由器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钩子很棒

如果你的URL看起来像/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 })

如果您的查询参数包含hyphone（"-"）或space（""）然后你不能像{ page, fields, count, ...unknown }那样解包

你需要按条件分配，比如

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


const params = useQueryParams();


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

小开

实际上没有必要使用第三方库。我们可以用纯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[]=your ParamValue1&your ParamName[]=your ParamValue2

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

结果将是这样的：

["yourParamValue1", "yourParamValue2"]

小开

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

如果url更改，则挂钩状态更新
SSR：typeof window === "undefined"，只是检查window会导致错误（尝试一下）
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
}

如果你的url看起来像这样：

/app?page=2&count=10

你可以这样读：

const { page, count } = useQueryParams();


console.log(page, count)

小开

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
}

小开

如果您使用的是功能组件，请使用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)
}

小开

React路由器v6

图片来源：在React路由器中获取查询字符串（搜索参数）

使用新的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路由器中获取查询字符串（搜索参数）

小开

试试这个

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

小开

您可以使用这个用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');

小开

在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"}

小开

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

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

小开

最被接受的答案中的链接已死，因为SO不会让我发表评论，对于React路由器v6.3.0，您可以参数名挂钩

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

小开

`URLSearchParams`的简单解构分配

试试下面的测试：

1 转到：https://www.google.com/?param1=apple&； Param2=香蕉

2 Right click页面>点击Inspect>gotoConsole tab
然后粘贴下面的代码：

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

输出：

YES!!! apple banana

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

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

React路由器v4

URLSearchParams的简单解构分配

`URLSearchParams`的简单解构分配