history.state 无法传参ref值
时间: 2024-05-11 08:19:03 浏览: 37
这是因为 `history.state` 只能存储 JSON-serializable 数据,而 `ref` 是一个对象,不能被 JSON 序列化。如果你需要在历史记录中存储一个对象引用,可以考虑使用一个唯一的标识符,并将它存储在 `history.state` 中,然后在需要使用该对象时,使用该标识符来获取它。
例如,你可以将 `ref` 的 `id` 属性存储在 `history.state` 中:
```javascript
const id = ref.id
history.pushState({ id }, '', '/new-url')
```
然后,你可以在新的页面中使用该 `id` 来获取相应的对象:
```javascript
const id = history.state.id
const ref = document.getElementById(id)
```
相关问题
history.push 如何传参
使用 `history.push` 方法可以将用户导航到新的路由,并且可以向新的路由传递参数。在 `react-router-dom` 库中,可以通过将参数添加到路由路径中的方式来传递参数。
具体用法如下:
1. 在定义路由时,使用 `:` 符号指定参数占位符:
```javascript
<Route path="/user/:id" component={User} />
```
在上面的例子中,我们定义了一个名为 `id` 的参数占位符,它可以匹配任意字符串。
2. 在调用 `history.push` 方法时,将参数添加到路由路径中:
```javascript
history.push(`/user/${userId}`);
```
在上面的例子中,我们将 `userId` 变量的值添加到路由路径中,以便在新的路由中访问该参数。
3. 在新的路由组件中,通过 `props.match.params` 对象获取参数值:
```javascript
function User(props) {
const { id } = props.match.params;
// 使用参数值进行渲染
return (
<div>
<h2>User ID: {id}</h2>
</div>
);
}
```
在上面的例子中,我们在 `User` 组件中通过 `props.match.params` 对象获取路由参数的值,并使用该值进行渲染。
需要注意的是,路由参数可以是任意字符串,包括数字、字母和特殊字符。但是,在将参数添加到路由路径中时,需要将参数值进行编码,以避免特殊字符导致的路由匹配问题。可以使用 `encodeURIComponent` 方法对参数值进行编码。例如:
```javascript
const userId = encodeURIComponent('123#abc');
history.push(`/user/${userId}`);
```
在上面的例子中,我们对 `userId` 变量的值进行了编码,以避免 `#` 符号导致的路由匹配问题。在 `User` 组件中使用 `decodeURIComponent` 方法对参数值进行解码即可。
history.state
`history.state` 属性返回当前页面的历史状态对象。它可以用来存储和获取与特定历史条目相关的数据。当通过调用 `history.pushState()` 或 `history.replaceState()` 方法添加或修改历史条目时,可以提供一个状态对象作为参数。这个状态对象可以在后续调用 `history.state` 时获取。如果当前页面没有历史记录,则 `history.state` 返回 `null`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)