Reactjs 如何将React路由器参数与状态同步

使用网络路由器

假设我们有一个路由：

/：user？showDetails=true

。我们知道如何使用钩子和类似自定义钩子的东西从URL获取数据

此外，我们知道如何使用设置该数据

但是，如果我们获取并设置了这些数据，如果我们不使用这些数据将用户从一个页面重定向到另一个页面，而是更改当前组件（让用户保存其当前页面视图），这意味着路由是状态

如何将路由作为状态使用，而不使组件因大量

历史记录而变脏。推送
和
使用参数
？
更新
我将此自定义挂钩发布为npm包：


如果要将
路由
用作
状态
，则需要一种方法获取路由参数，并更新它们

您无法避免使用
历史记录。按
，因为这是您更改“状态”的方式，您的
路线
。但您可以隐藏此命令以获得更清晰的代码

下面是一个如何在自定义钩子中隐藏get和update的示例，使它们看起来像常规的
useState
钩子：

使用查询参数作为状态：

从'react router dom'导入{useHistory，useLocation}
const useQueryAstate=（）=>{
常量{pathname，search}=useLocation（）
const history=useHistory（）
//用于从URLSearchParams创建对象的helper方法
const params=GetQueryParamsObject（搜索）
常量updateQuery=（updatedParams）=>{
赋值（参数，更新的参数）
//将{key1:value，k:v}转换为“？key1=value&k=v”的helper方法
replace（路径名+objectToQueryParams（参数））
}
return[params，updateQuery]
}

使用路由参数作为状态：

从'react router dom'导入{generatePath，useHistory，useRouteMatch}
const useparamsastate=（）=>{
常量{path，params}=useRouteMatch（）
const history=useHistory（）
常量updateParams=（updateParams）=>{
赋值（参数，更新的参数）
推送（generatePath（路径，参数））
}
返回[参数，更新图表]
}

请注意
历史记录。在查询参数代码中替换
，并在路由参数代码中按下

用法：（不是我的代码中的真正组件，如果有编译问题，很抱歉）

const ExampleComponent=（）=>{
const[{user}，updateParams]=useParamsAsState（）
const[{showDetails}，updateQuery]=useQueryAstate（）
返回
{user}
{showDetails==='true'和&&'Some details'}
updateParams（{user:selected}）/>
updateQuery（{showDetails:isChecked}}}/>
}
我需要帮助发布一个包，您著名的
objectToQueryParams
函数可以简单地作为
URLSearchParams
的包装器。看见