reactjs - React router v4 历史记录，有没有办法获取您导航的网址？

Question

在旧版本的 React Router 中，状态有一个 redirectPath 状态对象，您可以从中获取以前的 URL。在新版本中，情况不再如此。通过 history.push 导航到新 URL 时，显示的只是新 URL，没有明显的方法来获取您之前导航的 URL。 React Router 或 history 包本身是否有一些功能允许您获取以前的 URL？

我们正在使用 goBack，这似乎可行，但如果用户要离开应用程序(例如谷歌)的页面并返回到应用程序，则 goBack 函数将再次路由到谷歌。我们该如何解决这个问题？

谢谢

Answer 1

您可以在 state: {} 中推送额外信息喜欢

<Link to={{ pathname: '/about', state: { fromHome: true } }}>About</Link>

然后当路由改变时，你可以访问state对象并检查用户如何导航到您的路线。

今天我创建了包 react-router-last-location其中提供:

• withLastLocation() , 通过 lastLocation 的高阶分量作为组件的 Prop
• <LastLocationProvider />应在内部使用的组件 <Router /> .

示例用法

您应用的入口点

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { LastLocationProvider } from 'react-router-last-location';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Logger from './components/Logger';

const App = () => (
  <Router>
    <LastLocationProvider>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />

        <hr />

        <Logger />
      </div>
    </LastLocationProvider>
  </Router>
);

render(<App />, document.getElementById('root'));

应该有权访问最后位置的组件

import React from 'react';
import { withLastLocation } from 'react-router-last-location';

const Logger = ({ lastLocation }) => (
  <div>
    <h2>Logger!</h2>
    <pre>
      {JSON.stringify(lastLocation)}
    </pre>
  </div>
);

export default withLastLocation(Logger);

你可以从 npm 安装它

npm install react-router-last-location --save

• https://www.npmjs.com/package/react-router-last-location
• https://github.com/hinok/react-router-last-location