React Router v4历史记录，有没有办法获取您正在浏览的网址？

Question

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

我们正在使用goBack，这似乎可行，但是如果用户要转到应用程序之外的页面（例如google）并返回到该应用程序，则goBack函数将再次路由至google。我们该如何解决？

谢谢

Answer 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

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