时间戳

首页 > 解决方案 > 在反应路由器dom url中添加复选框值

reactjs - 在反应路由器dom url中添加复选框值

问题描述

我有以下复选框。我想知道如何使用每个链接的值动态创建 url 链接。

例子 ：

 <Route exact path = {"/Pesquisar/:searchField/:page"} component = {withRouter(Pesquisa)}>
  </Route>

这是我现在拥有的网址。如果我标记 CIRCULAR，我希望是这样的：

Pesquisar/some_content&circular=1/1

如果我标记多个复选框，我会期望

  Pesquisar/some_content&circular=1&parecer=1&lei=1/1

在此处输入图像描述

如何使用 react router dom 创建此行为？

标签： reactjs

解决方案

queryStrings每当您更改网址时，您都可以使用

npm install react-router

.

import {useHistory} from "react-router"

然后

const history = useHstory();

history.push({
  pathname: '/dresses',
  search: '?checkbox=true'
})

上面的代码将向 url 添加一个查询字符串，这样我们就可以使用它，并且 url 就像

https://myurl.com/dresses?checkbox=true

然后在你的代码中

const params = new URLSearchParams(window.location.search)

检查它是否存在

params.has('checkbox')?params.get('checkbox'):""

或记录

console.log(params.has('checkbox')?params.get('checkbox'):"")

回报将是true

我不确定，但我认为它将是字符串，所以如果你想使用它，请检查它是否等于"true"如下所示

<Checkbox open = {params.has('checkbox')&&params.get('checkbox')==="true"?true:false} />

推荐阅读