React router v4 历史，有没有办法获取您正在导航的网址？答案

【问题标题】：React router v4 history, is there a way to get the url you are navigating from?React router v4 历史，有没有办法获取您正在导航的网址？
【发布时间】：2017-10-22 14:32:32
【问题描述】：

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

我们正在使用 goBack，这似乎有效，但如果用户要从应用程序（例如 google）转到页面并返回应用程序，goBack 函数将再次路由到 google。我们该如何解决这个问题？

谢谢

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您可以在state: {} 中推送更多信息

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

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

今天我创建了包react-router-last-location，它提供：

withLastLocation()，高阶组件，将 lastLocation 作为道具传递给您的组件
<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

【讨论】：

我有问题。我可以使用什么属性来事先检查路线计划去哪里？我想确保 goBack 只路由到我的应用程序而不是外部 url。
只要检查lastLocation !== null。它仅跟踪应用程序中的路由更改。它不访问浏览器历史记录，例如：jsfiddle.net/8nx3unp9
感谢您的回答。检查您的组件与我在其他站点中遵循的示例几乎相同。我没有使用您的组件，因为它在我的应用程序启动时出现错误。我会继续尝试并检查是否能找到答案。谢谢
@RichardValdivieso 我在 1.0.1 中修复了它。它现在应该可以工作。如果你愿意，你可以试一试。