在以下组件中,如果单击两个按钮中的任何一个,则地址栏中的URL会更改。
在列表视图中,如果单击按钮 Details (详细信息),页面将呈现并显示该特定项以及地址栏中的URL也被更改。 在用户视图中,如果您单击“返回总览”按钮,则页面将返回到列表视图,并且URL将再次更改。
import React, { useState, useEffect, Fragment } from 'react'
import axios from 'axios'
const UserList = ({ id, setID }) => {
const [resources, setResources] = useState([])
const fetchResource = async () => {
const response = await axios.get(
'https://api.randomuser.me'
)
setResources(response.data.results)
}
useEffect(() => {
fetchResource()
}, [])
const renderItem = (item, userId) => {
const setURL = (e) => {
window.history.pushState(null, null, '/' + e)
setID(item.login.uuid)
}
const clearURL = (e) => {
window.history.back()
setID(null)
}
return (
<Fragment key={item.login.uuid}>
{userId ? (
// User view
<div>
<img src={item.picture.large} />
<h2>
{item.name.first}
</h2>
<p>
{item.phone}
<br />
{item.email}
</p>
<button onClick={() => clearURL('/')}>
Back to overview
</button>
</div>
) : (
// List view
<li>
<img src={item.picture.large} />
<h2>
{item.name.first}
</h2>
<button onClick={() => setURL(item.login.uuid)}>
Details
</button>
</li>
)}
</Fragment>
)
}
const user = resources.find(user => user.login.uuid === id)
if (user) {
// User view
return <div>{renderItem(user, true)}</div>
} else {
// List view
return (
<>
<ul>
{resources.map(user => renderItem(user, false))}
</ul>
</>
)
}
}
export default UserList
一切正常。
但是,此解决方案的问题在于,在用户视图上,我无法使用浏览器的后退按钮返回列表视图页面。 我有什么办法可以不使用React Route来改变它?
答案 0 :(得分:0)
所以我相信正在发生的事情是您在覆盖浏览器的“历史记录”。 “历史记录”几乎只是您走过的路径的堆栈,当您单击“后退”按钮时,它只是将当前路径弹出堆栈。我认为,当您使用'window.history.pushState(null,null,'/'+ e)'时,将history =设置为null,因此没有任何可回溯的内容。我建议使用react-router并只推路径。 router.push('/ whatever')。在不使用本机历史对象的情况下,有很多方法可以通过反应与历史进行交互。如果要使用本机历史对象https://developer.mozilla.org/en-US/docs/Web/API/History_API
编辑-我很抱歉您没有覆盖历史,但是我仍然相信错误是由于传递了一个“空”值作为pushState方法的“状态”参数而产生的