使用 History React Router v6 的主要問題是它不支持基於哈希的路由。 這意味著所有 URL 都必須是絕對路徑,這會使管理和維護應用程序變得困難。 此外,沒有對動態路由的內置支持,這在創建具有多個頁面的複雜應用程序時可能是個問題。 最後,History React Router v6 不提供對服務器端渲染的任何支持,這在某些情況下可能是必需的。
import { BrowserRouter as Router, Switch, Route, useHistory, } from "react-router-dom"; function App() { const history = useHistory(); // Handle a button click to push a new entry onto the history stack. function handleClick() { history.push("/new-location"); } return ( <div> <button type="button" onClick={handleClick}>Go to New Location</button> <Switch> <Route path="/new-location"> <NewLocation /> </Route> </Switch> </div> ); }
// 此代碼從 react-router-dom 庫中導入 BrowserRouter、Switch、Route 和 useHistory 組件。
// 然後它創建一個名為 App 的函數,該函數使用 useHistory 掛鉤來創建一個歷史對象。
// 這個歷史對像在一個名為 handleClick 的函數中使用,該函數在調用時將一個新條目推送到歷史堆棧中。
// App 函數然後返回一些 JSX,其中包括一個帶有 onClick 處理程序的按鈕,單擊時調用 handleClick。
// 最後,有一個 Switch 組件,其中有一個 Route 組件,當它的路徑匹配“/new-location”時渲染 NewLocation 組件。
什麼是useHistory
useHistory 是 React Router 提供的 React Hook,它允許組件訪問歷史對像以便以編程方式導航。 它可用於將新位置推送到歷史堆棧、替換當前位置、在歷史中來回移動等。
我如何在反應中獲取路線歷史記錄
在 React Router 中,您可以使用 useHistory hook 獲取路由歷史記錄。 這個掛鉤可以訪問歷史實例,您可以使用它來導航、在應用程序的歷史記錄中來回移動等等。 要使用它,只需從 React Router 導入鉤子,然後在您的組件中調用它:
從'react-router-dom'導入{useHistory};
const MyComponent = () => {
const 歷史 = useHistory();
// 現在您可以通過 `history` 對象訪問路由歷史記錄。
返回 (…);
}
React router 是否使用 history API
是的,React Router 使用 HTML5 History API 來跟踪當前位置及其歷史記錄。 這允許 React Router 更新頁面而無需重新加載它,從而使導航更快更流暢。 History API 還允許深度鏈接,這使用戶可以更輕鬆地共享將他們直接帶到應用程序中特定頁面的鏈接。