小能豆

在反应路由器中检测以前的路径?

javascript

我正在使用 React Router。我想检测我来自的上一个页面(在同一个应用程序内)。我的上下文中有路由器。但是,我没有在路由器对象上看到任何属性,例如“上一个路径”或历史记录。我该怎么做?


阅读 47

收藏
2024-06-05

共1个答案

小能豆

在 React Router 中,你可以使用useHistoryhoo

Java 语言复制代码import { useHistory } from "react-router-dom";

function MyComponent() {
  const history = useHistory();

  // Function to go back to the previous page
  const goBack = () => {
    history.goBack();
  };

  // Accessing the previous path
  const previousPath = history.location.state && history.location.state.from.pathname;

  return (

    <div>
      <div>
      <p>Previous Path: {previousPath}</p>
      <button onClick={goBack}>Go Back</button>
    </div>
  );
}

在此示例中:

  • 我们用useHistory钩子来
  • 我们定义一个调用goBackhistory.goBack()返回上一页的函数。
  • 我们访问中的属性pathname,其中包含以前的位置信息。from`history.location.state
  • 我们展示

确保用<Router>hi包装你的组件useHistory以便可以访问路由器上下文。

2024-06-05