Question

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

Answer 1

如果您正在使用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 2

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

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

然后，您可以从下一个组件

中的prevPath访问this.props.location.state

Answer 3

您可以在componentWillReceiveProps生命周期方法中保存以前的路径。该逻辑与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 }) } } })文档中提供的示例非常接近。

Item[]

最近，从州进入。

Answer 4

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

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

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

然后我可以使用history.location.state.from

访问上一页

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

如果您使用的是<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 7

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

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 8

使用 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 9

基于AV Paul的回答，我试图通过location的state属性获取上一条路径。我什至没有将任何东西传递给Link组件，只是：

...
    useEffect(() => {
      const { location, history } = props
      const previousPath = location.state.from.pathname
      if(previousPath) history.push(previousPath)
    });
...

或用于类组件：

...
    componentDidMount() {
      const { location, history } = this.props
      const previousPath = location.state.from.pathname
      if(previousPath) history.push(previousPath)
    };
...

我正在使用react-router-dom v5

Answer 10

反应-使用道具获取上一条路径

for usage in data['usages']:
    print(len(usage['resources']))

如果您使用console.log(props.history.location.state && props.history.location.state.from.pathname);重定向

Answer 11

此答案使用与@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]);
}

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

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

Answer 12

我需要一种方法，仅当先前的路径等于特定路线时才进行有条件导航。有了一个功能组件，它就变成了这样。仅当路由为 && 时，.push() 才会触发 '/cart' 方法。

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

const history = useHistory();

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

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

12 个答案: