react如何获取页面地址
获取当前页面地址
在React中可以通过window.location对象获取当前页面的完整地址。该对象包含多个属性，如href、pathname、search等，可根据需求选择使用。
const currentUrl = window.location.href; // 完整URL
const pathName = window.location.pathname; // 路径部分
const queryParams = window.location.search; // 查询参数使用React Router获取路由信息
如果应用使用React Router，可以通过useLocation钩子获取当前路由信息。这种方式更适用于客户端路由的场景。
import { useLocation } from 'react-router-dom';
function Component() {
const location = useLocation();
console.log(location.pathname); // 当前路径
console.log(location.search); // 查询参数
}获取URL参数
从URL中提取查询参数可以使用URLSearchParams接口。这种方式可以方便地解析和处理查询字符串。
const query = new URLSearchParams(window.location.search);
const paramValue = query.get('paramName'); // 获取特定参数值监听URL变化
在React Router中可以使用useEffect配合useLocation来监听URL变化。这种方式适用于需要在URL变更时执行特定操作的场景。
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function Component() {
const location = useLocation();
useEffect(() => {
// URL变化时执行的操作
}, [location]);
}服务器端获取URL
在服务端渲染(SSR)场景下，如使用Next.js框架，可以通过上下文对象获取请求的URL信息。
// Next.js示例
export async function getServerSideProps(context) {
const { req } = context;
const url = req.url; // 服务器端获取URL
}
