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

Question

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

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

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

-在"列表"组件的顶部，有一个"返回"按钮，它会将用户路由回用户登录到列表组件的上一个组件。这里我使用的是useHistory((钩子。

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

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

绕过URL参数并直接返回到上一个组件的技巧/方法是什么？以下是我正在使用并声明useHistory((钩子的顶行组件的代码。

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.goBack()}}/>
</div>
</div>
);
}
export default 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;

Answer 1

为什么需要后台功能？重定向到特定地址对你来说不是更有用吗？尝试以下操作：

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;

希望我能正确理解你，这会有所帮助。

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