Question

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

Answer 1

所以我相信正在发生的事情是您在覆盖浏览器的“历史记录”。 “历史记录”几乎只是您走过的路径的堆栈，当您单击“后退”按钮时，它只是将当前路径弹出堆栈。我认为，当您使用'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方法的“状态”参数而产生的

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

1 个答案: