Reactjs React/React路由器：返回到上一个组件，绕过相同组件URL参数中的更改

以下是我在React上的web应用程序的工作原理：

-有一个组件列出用户生成的所有内容。让我们称之为“列表”组件

-在“列表”组件中，有一个导航栏。所选导航选项将对用户生成的内容进行排序/过滤。导航选项作为URL参数传递

-在“列表”组件的顶部，有一个“返回”按钮，该按钮将用户路由回上一个组件，用户从该组件登录到列表组件。这里我使用的是useHistory（）钩子

-例如，假设用户被路由到具有“/list”路径的“list”组件，从具有“/”路径的“home”组件。当用户单击“返回”按钮时，用户将被路由回“主”组件

问题是，react路由器似乎记住了“/list”路径中的所有导航历史记录，并将路由回带有参数的URL。例如，它不会将用户路由回“/”路径，而是路由回“/list/abc/”、“/list/xyz”等。可以理解，这是糟糕的用户体验

绕过URL参数直接返回上一个组件的技巧/方法是什么？下面是我正在使用并声明useHistory（）hook的顶层组件的代码

从“React”导入React；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortwome/free solid svg icons”导入{faChevronLeft}”；
从“react router dom”导入{useHistory}
函数ListTopRow（）{
让历史=使用历史（）；
返回(
{history.goBack（）}}/>
);
}
导出默认ListTopRow；

有什么建议吗？提前多谢

编辑： 如果有人感兴趣，我解决了这个问题，在加载组件时将历史长度存储为状态，并与history.length结合使用，以完全实现我的目的：

import {React, useState, useEffect} from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {
   const [historycount, sethistorycount] = useState(null);

   let history = useHistory();

   useEffect(()=>{
       sethistorycount(history.length);
   },[])

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.goBack(historycount-history.length-1)}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;

从'React'导入{React，useState，useffect}；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortwome/free solid svg icons”导入{faChevronLeft}”；
从“react router dom”导入{useHistory}
函数ListTopRow（）{
常量[historycount，sethistorycount]=useState（null）；
让历史=使用历史（）；
useffect（（）=>{
sethistorycount（history.length）；
},[])
返回(
{history.goBack（historycount history.length-1）}/>
);
}
导出默认ListTopRow；

为什么需要后台功能？重定向到特定地址对您是否更有用？请尝试以下操作：

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {

   let history = useHistory();

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.push('/')}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;

从“React”导入React；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortwome/free solid svg icons”导入{faChevronLeft}”；
从“react router dom”导入{useHistory}
函数ListTopRow（）{
让历史=使用历史（）；
返回(
{history.push（'/'）}/>
);
}
导出默认ListTopRow；

希望我正确地理解了您的意思，这会有所帮助

---

编辑：现在我明白你的意思了，我很快就会回来回答你。

嘿，恩切，谢谢你的回答。我忘记提到的一点是，前面的组件具有无限滚动功能，因此当我使用history.push重定向时，滚动位置将不会保留。back（）本来是完美的，但是URL参数的每个更改都保存在历史记录中。有没有克服这些问题的建议？您可以定义一个自定义历史堆栈，在其中只添加您希望能够返回的路径。（这可以保存到新组件的状态或redux状态）例如，当您对表进行排序时，更改url，但不将其添加到堆栈中，当您转到新页面时，.back（）按钮可以用作.push。我相信你希望不同的页面有不同的行为。（有时向后，有时推）。为此，您可以实现这样的逻辑，以便每个组件定义自己的后台功能。如果您需要帮助，请告诉我。嗨，Enchew，基于您的回答，我找到了一个非常简单的解决方案。编辑上面的问题以显示我的解决方案。再次感谢。

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
import { useHistory } from "react-router-dom"

function ListTopRow() {

   let history = useHistory();

   return(
    <div className="top_row">
            <div className="goback">
                <FontAwesomeIcon icon={faChevronLeft} onClick={()=>{history.push('/')}}/>
            </div>
    </div>
    );
 }

 export default ListTopRow;