React使用<Link>跳转当前页并保留查询参数异常如何解决

React Router 的Link组件to属性默认会将传入的字符串与当前站点的baseURL拼接，你直接传入完整地址window.location.href会导致地址被重复拼接，就出现了地址重复的问题。

• 方案1：使用useLocation钩子获取当前位置对象（推荐，兼容性最强）
  直接将useLocation返回的位置对象传入to属性，会100%保留当前的路径、查询参数、锚点信息，不需要手动做任何拼接处理：

// 先导入依赖
import { Link, useLocation } from 'react-router-dom';

// 组件内使用
function DemoComponent() {
  const curLocation = useLocation();
  return <Link to={curLocation}>Name</Link>
}

• 方案2：直接传入相对路径标识.
  如果不需要额外修改路径参数，直接给to属性传.即可，代表指向当前路由路径，会自动保留所有现有查询参数：

<Link to=".">Name</Link>

之前使用#作为to属性值不符合需求的原因是#是锚点前缀，传入后会清空原有查询参数，仅保留路径和锚点标识。

内容的提问来源于stack exchange，提问作者user14899645