Query parameters 查询参数

react router之Query parameters 查询参数

部分内容参考文章：https://www.mediaat.cn/news/show-3418.html，感谢(ง •_•)ง

一、Query parameters

该示例其实本质是借用了浏览器内置的URLSearchParams，这个方法可以很方便的解析url参数，但这个存在兼容问题，放弃IE家族就没问题了。具体URLSearchParamsAPI，可参考MDN这段示例代码：

var paramsString = "q=URLUtils.searchParams&topic=api"
var searchParams = new URLSearchParams(paramsString);searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

1-- React Router对于应该如何解析URL查询字符串没有任何意见。
2-- 如果使用简单的key=value查询字符串，并且不需要支持IE 11，则可以使用浏览器内置的URLSearchParams API。
3-- 如果查询字符串包含数组或对象语法，则可能需要自带查询解析函数。

官网案例：

import React from "react";
import { render } from 'react-dom'
import {BrowserRouter as Router,Link,useLocation
} from "react-router-dom";export default function App() {return (<Router><QueryParamsDemo /></Router>);
}//一个基于useLocation的自定义钩子，用于解析查询字符串
function useQuery() {// console.log以点击Yahoo为例：console.log(useLocation()); //{pathname: "/account", search: "?name=yahoo", hash: "", state: undefined, key: "h7ecl7"}console.log(useLocation().search);  //?name=yahooreturn new URLSearchParams(useLocation().search);
}function QueryParamsDemo() {let query = useQuery();return (<div><div><h2>Accounts</h2><ul><li><Link to="/account?name=netflix">Netflix</Link></li><li><Link to="/account?name=zillow-group">Zillow Group</Link></li><li><Link to="/account?name=yahoo">Yahoo</Link></li><li><Link to="/account?name=modus-create">Modus Create</Link></li></ul><Child name={query.get("name")} /></div></div>);
}function Child({ name }) {return (<div>{name ? (<h3>The <code>name</code> in the query string is &quot;{name}&quot;</h3>) : (<h3>There is no name in the query string</h3>)}</div>);
}render(<App />, document.getElementById("root")
)

效果：

二、useLocation（具体可见Hooks）

1-- useLocation钩子返回表示当前URL的location对象。您可以将其视为useState，它在URL更改时返回新位置。
2-- 这可能非常有用，例如，在您希望在加载新页面时使用web分析工具触发新的“页面视图”事件的情况下

Query parameters 查询参数相关推荐

在AngularJS中读取查询参数的最简洁方法是什么？
本文翻译自:What's the most concise way to read query parameters in AngularJS? I'd like to read the values ...
feign调用接口参数可以为null吗_FeignClient调用POST请求时查询参数被丢失的情况分析与处理...
前言本文没有详细介绍 FeignClient 的知识点,网上有很多优秀的文章介绍了 FeignCient 的知识点,在这里本人就不重复了,只是专注在这个问题点上. 查询参数丢失场景业务描述: 业务 ...
html获取url后面的参数_Golang Gin 实战（四）| URL查询参数的获取和原理分析
在上一篇 Golang Gin 实战(三)| 路由参数文章中,主要介绍了路由通配符.路由参数,让我们有了一种可以从URL路径中获取参数的方式,同时又不是重复的注册相似的路由. 这一篇,主要介绍查询 ...
hibernate使用Query进行查询
本文主要探讨hibernate的简单查询,主要是使用Query进行的查询. 1.首先看下annotation的API中关于查询的描述 2.3. 映射查询 2.3.1. 映射EJBQL/HQL查询使用 ...
solr查询参数使用说明
q – 查询字符串,必须的.Solr 中用来搜索的查询.有关该语法的完整描述,请参阅参考资料中的 "Lucene QueryParser Syntax".可以通过追加一个分号和已 ...
solr常用查询参数意义及其简单用法
最近开始搞solr,其查询界面的一些参数令人费解,于是写篇博客总结一下较常用的参数的意义和用法. 查询参数界面如下图: q:query 查询字符串输入 * : *,返回所有结果输入 apple,返 ...
Go 学习笔记（50）— Go 标准库之 net/url（查询转义、查询参数增/删/改/查、解析URL）
1. URL 概述 import "net/url" url 包解析 URL 并实现了查询的转码.URL 提供了一种定位因特网上任意资源的手段,但这些资源是可以通过各种不同的方案( ...
基于服务器端保存用户的查询参数
基于服务器端保存用户的查询参数最近公司项目有一个新的需求, 希望用户在PC查询的参数能够同步更新到APP端, 避免让用户在PC和APP端重复输入查询条件, 基于项目是前后端分离, APP和PC的请求 ...
ASP.NET三层架构之不确定查询参数个数的查询
在做三层架构的时候,特别是对表做查询的时候,有时候并不确定查询条件的个数,比如查询学生表:有可能只输入学号,或者姓名,或者性别,总之查询条件的参数个数并不确定,下面是我用List实现传值的代码: 附图 ...

Query parameters 查询参数

react router之Query parameters 查询参数

Query parameters 查询参数相关推荐

最新文章

热门文章