reactjs - React/React-router：返回上一个组件，绕过相同组件 URL 参数的更改

Question

这是我在 React 上的 Web 应用程序的工作方式：

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

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

- 在“列表”组件的顶部，有一个“返回”按钮，它将引导用户返回到用户从其登陆到列表组件的上一个组件。这里我使用 useHistory() 钩子。

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

问题是，react router 似乎记住了“/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;

标签： reactjsreact-routerreact-router-dom

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;

希望我对您的理解正确，这会有所帮助。

编辑：现在我明白了你的意思，我会尽快回复。