location

Window.location 详细介绍

Location

Document 和 Window 接口都有这样一个链接的 Location接口，分别通过 Document.location和Window.location 访问。

window.location	返回值
.origin	协议 + 主机名 + 端口号
.protocol	协议，例如(http: 或 https:)
.host	域名 + 端口
.hostname	域名
.port	端口号
.pathname	首个 / 开始的路径名称
.search	?开始的参数字符串
.hash	#后跟随的锚点或是片段标识符
href	完整网址# search参数

通过location检索url信息

比如url：https://www.daming.com/tidbits/?filter=JS#2

属性	值
window.location.origin	https://www.daming.com
window.location.protocol	https:
window.location.host	www.daming.com
window.location.hostname	www.daming.com
window.location.port
window.location.pathname	/tidbits/
window.location.search	?filter=JS
window.location.hash	#2
window.location.href	https://www.daming.com/tidbits/?filter=JS#2

比如url：https://www.daming.com:8080

属性	值
window.location.origin	https://www.daming.com:8080
window.location.protocol	https:
window.location.host	www.daming.com:8080
window.location.hostname	www.daming.com
window.location.port	8080
window.location.pathname	/tidbits/
window.location.search	?filter=JS
window.location.hash	#2
window.location.href	https://www.daming.com/tidbits/?filter=JS#2

利用location使用它来设置新的属性和更改 URL

// Example
window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = '/home'
               .search   = 'id=1' // (不需要传入 ?)
               .hash     = '#2' // (不需要传入 #)
               .href     = 'https://www.daming.com/home?id=1#2'

location函数

window.location	作用
.assign()	跳转到给定的 URL
.replace()	跳转到给定的 URL，并且从历史记录中删除当前页面
.reload()	重新加载当前页面
.toString()	返回 URL 字符串

获取seach参数

URLSearchParams

• URLSearchParams.append(name, value) 插入一个新搜索参数
• URLSearchParams.set(name, value) set() 方法用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它。
• searchParams.entries();法返回一个迭代器，允许遍历该对象中包含的所有键/值对。迭代器返回键/值对，其顺序与它们在查询字符串中出现的顺序相同。每一组键和值都是字符串对象。
• URLSearchParams.get(name) get()方法返回第一个与搜索参数对应的值。
• URLSearchParams.getAll(name) getAll() 方法以数组的形式返回与指定搜索参数对应的所有值。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//添加第二个 foo 搜索参数。
params.append("foo", 4);

params.get('foo') // '1'
params.getAll('foo') // ['1', '4']

例子

1. 通过URLSearchParams解析search参数

const searchStr = window.location.search // ?name=daming&age=12
const searchParams = new URLSearchParams(searchStr); 
const [name, age] = [searchParams.get('name'), searchParams.get('age')];

2. 构造search参数

const params = new URLSearchParams();
params.set(name, 'daming');
params.set(age, '2');
// 转换
parmas.toString() // ?name=daming&age=2

3. 转换参数

function parseURLSearchParams(queryString: string) {
  const params = new URLSearchParams(queryString);
  const parsedObj: Record<string, string> = {};

  for (const [key, value] of params.entries()) {
    parsedObj[key] = value;
  }

  return parsedObj;
}

parseURLSearchParams('?name=daming&age=2')

react router v6 接收search参数

// 通过hooks获取
const [searchParams] = useSearchParmas();
const name = searchParams.get('name');

构造search参数

const params = new URLSearchParams();
params.append('name', 'daming');
const search = params.toString();
history.push({
  pathname: `/volume/transfer/toPostPaid`,
  search: search,
});
// 或者
const url = baseUrl + search ? search : ''

接收路由上的params参数

// 父组件
<Routes>
	<Route path="detail/:id" element={<Com />}/>
</Routes>

<Link to={`detail/${id}`}>

// Com组件
const params = useParams();
const {id} = params

接收路由上的state参数

// 父组件-路由定义
<Routes>
	<Route path="detail" element={<Com />}/>
</Routes>

// 父组件
<Link to={'detail'} state={{name: 'daming'}}>

// Com组件
cosnt params = useLocation();
const {name} = params.state;

参考

React Router v6 传参