检测路由器中的上一个路径？

Question

我正在使用反应路由器.我想从我来自的地方检测上一页(在同一个应用程序中).我在我的上下文中有路由器.但是,我没有在路由器对象上看到任何属性,如"上一个路径"或历史记录.我该怎么做？

Answer 1

您可以使用<Link>组件传递状态,在本例中为路径名:

<Link to={{pathname: '/nextpath', state: { prevPath: location.pathname }}}>Example Link</Link>

然后,您可以prevPath从this.props.location.state下一个组件中进行访问

Answer 2

不要检查上一页是什么，而是从不同的角度解决问题。将当前页面作为道具传递给您要导航到的组件或链接。

在我调用 history.push 或单击链接的上一个页面或组件中，我添加了我所在的当前页面的状态，例如

history.push(`/device/detail`, { from: 'device detail page' } );

然后我可以使用 history.location.state.from 访问上一页的内容

Answer 3

如果您正在使用react-router-redux,则可以创建一个reducer,它可以挂接react-router-redux调度的事件.

export default function routerLocations(state = [], action) {
  switch (action.type) {
    case "@@router/LOCATION_CHANGE":
      return [...state, action.payload]
    default:
      return state;
  }
}

Answer 4

您可以在componentWillReceiveProps生命周期方法中保存以前的路径.该逻辑非常接近于docs的故障排除部分中提供的示例react-router.

<Route component={App}>
  {/* ... other routes */}
</Route>

const App = React.createClass({
  getInitialState() {
    return { prevPath: '' }
  },

  componentWillReceiveProps(nextProps) {
    if (nextProps.location !== this.props.location) {
      this.setState({ prevPath: this.props.location })
    }
  }
})

最近,从州访问它.

Answer 5

使用react-router 的useHistory钩子，在功能组件的无状态状态下跳转到之前的路径。有关更多信息，请点击链接https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/hooks.md#useroutematch

import { useHistory } from "react-router-dom";

function demo () {
    let history = useHistory();
    const goToPreviousPath = () => {
        history.goBack()
    }
    return (
      <div>
        <Button
          onClick={goToPreviousPath}
        >
          Back
        </Button>
      </div>
    ):
}

Answer 6

从 08/2022 开始，对于使用 React Router v6 的用户，您可以使用 Navigate 组件、Link 组件或 useNavigate 钩子将前一个 url 传递到下一个组件：

在重定向组件中：

// with Navigate component (same as with Link component):
const location = useLocation();
...
<Navigate to="/nextpath" state={ { from: location } } />
...


// with useNavigate hook:
const navigate = useNavigate();
const location = useLocation();
....
navigate("/nextpath", { state: { from: location } });
...

在您重定向到的组件中：

...
const location = useLocation();
let from = location.state?.from?.pathname;
...

Answer 7

您可以使用 来监听并构建一个返回堆栈history.listen。这是一个可以做到这一点的钩子。

import { Location } from 'history';
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router';

const useBrowserBackStack = () => {
  const history = useHistory();
  const [backStack, setBackStack] = useState<Location[]>([]);
  useEffect(() => {
    history.listen((location, action) => {
      setBackStack(backStack => {
        switch (action) {
          case 'POP':
            return backStack.slice(0, backStack.length - 1);
          case 'PUSH':
            return [...backStack, location];
          case 'REPLACE':
            return [...backStack.slice(0, backStack.length - 1), location];
        }
      });
    });
  }, [setBackStack, history]);
  return backStack;
};

export default useBrowserBackStack;

然后像这样在你的顶级组件中使用

const backStack = useBrowserBackStack();