反應路由器v4的歷史，有沒有辦法讓你正在瀏覽的網址？

在舊版本的React Router中，狀態有一個redirectPath狀態對象，您可以從中獲取以前的URL。在新版本中，這不再是這種情況。當通過history.push導航到新的URL時，所有顯示的都是新的URL，沒有明顯的方式來獲取您之前導航的URL。 React Router或歷史包本身是否有一些功能可以讓您獲取以前的URL？反應路由器v4的歷史，有沒有辦法讓你正在瀏覽的網址？

我們正在使用goBack，這似乎工作，但如果用戶要離開應用程序（例如谷歌）的頁面並回到應用程序，goBack功能將再次路由到谷歌。我們如何解決這個問題？

謝謝

來源

2017-05-22 Richard Valdivieso

你可以在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

來源

2017-05-23 11:52:12 hinok

我有問題。我可以使用什麼財產來檢查路線計劃先行的位置？我想確保goBack只能路由到我的應用程序，而不是外部URL。 –

只要檢查'lastLocation！== null'。它僅跟蹤應用程序中的路由更改。它不訪問瀏覽器歷史記錄，例如：https://jsfiddle.net/8nx3unp9/ – hinok

感謝您的回答。檢查你的組件與我在其他站點中關注的例子幾乎相同。我沒有使用你的組件，因爲它在我的應用程序啓動時出錯。我會繼續嘗試並檢查是否可以找到答案。謝謝 –

反應路由器v4的歷史，有沒有辦法讓你正在瀏覽的網址？

回答

相關問題