反应-浏览器的“后退”按钮不起作用

时间:2019-11-06 18:50:58

标签: reactjs

在以下组件中,如果单击两个按钮中的任何一个,则地址栏中的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来改变它?

1 个答案:

答案 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方法的“状态”参数而产生的