Question

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

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

谢谢

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

React router v4 history，有没有办法获取你导航的url？

1 个答案: