检测反应路由器中的先前路径？

Question

我正在使用反应路由器。我想检测我来自的上一页（在同一个应用程序中）。我在我的上下文中有路由器。但是，我在路由器对象上看不到任何属性，例如“先前路径”或历史记录。我该怎么做？

Answer 1

您可以在 componentWillReceiveProps 生命周期方法中保存以前的路径。逻辑非常接近troubleshooting section 的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 2

如果你使用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 3

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

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

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

Answer 4

如果您使用的是<Redirect /> 组件，您可以添加一个from 属性，该属性将添加到您重定向到的组件中的location.state。

// in the redirecting component
<Redirect
to={{
  pathname: '/login',
  state: { from: location }
}}
/>

//in the other component you redirected to
...
const { location } = props.location.state;
...

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

如果有帮助，如果您不希望组件重新渲染并仍然获得以前的路径，请参阅此解决方案..

import { useLocation } from 'react-router-dom';


export default () => {
  const location = useLocation();
  const path = location.pathname;
  const store = window.localStorage;
  let url = '';
  let prevUrl = '';

  url = store.getItem('url');
  store.setItem('prevUrl', url);
  store.setItem('url', path);

  url = store.getItem('url');
  prevUrl = store.getItem('prevUrl');

  return { url, prevUrl };

}

Answer 7

React - 使用 props 获取上一个路径

console.log(props.history.location.state && props.history.location.state.from.pathname);

如果你使用<Link> OR <Redirect> ? pathname : undefined重定向

Answer 8

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

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

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

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

Answer 9

使用context可以存储之前的location路径名：

const RouterContext = React.createContext();

const RouterProvider = ({children}) => {
  const location = useLocation()
  const [route, setRoute] = useState({ //--> It can be replaced with useRef or localStorage
    to: location.pathname,
    from: location.pathname //--> previous pathname
  });

  useEffect(()=> {
    setRoute((prev)=> ({to: location.pathname, from: prev.to}) )
  }, [location]);
  
  return <RouterContext.Provider value={route}>
    {children}
  </RouterContext.Provider>
}

然后在RouterProvider下的某个组件中：

const route = useContext(RouterContext);
//...
<Link to={route.from}>
  Go Back
</Link>

或者

history.push(route.from);

注意：RouterContext 应该在Router 组件下，如果您不想更新状态，可以改用useRef。如果您需要更多持久性，请使用localStorage

Answer 10

此答案使用与@AlexandrLazarev 类似的方法，但通过 React Hooks 实现。这可确保捕获对路径的所有更改，无论它们是如何启动的。先前的路径值存储在顶级组件的状态中，然后可以作为道具传递给子组件，或者如果您使用像 Redux 这样的全局状态提供程序，可以将其添加到存储中：

import { useEffect, useState } from 'react'

cont App = ({ location }) => {
  const [currentPath, setCurrentPath] = useState(null);
  const [previousPath, setPreviousPath] = useState(null);

  useEffect(() => {
    if (location.pathname !== currentPath) {
      setPreviousPath(currentPath);
      setCurrentPath(location.pathname);
    }
  }, [location.pathname]);
}

标记中的实现类似于下面的 sn-p。我一直在使用 Reach Router，但考虑到它的 been merged 和 React Router 应该也可以在那里工作。 Router component 使 location 属性可供其所有子级使用，并在其 pathname 属性下保存当前路径的值

<Router>
  <App path="/*" />
<Router/>

Answer 11

我需要一种方法来有条件地导航，仅当先前的路径等于特定路径时。有了一个功能组件，它的工作原理是这样的。仅当路由为 '/cart' 时，&& 才会触发 .push() 方法。

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

const history = useHistory();

history.location.pathname === '/cart' && history.push('/checkout');