使用 React Router DOM 進行程式化導航
React 以其宣告式風格而聞名。當然,方法也起著重要作用。
正是抽象和方法功能的結合使 React 如此強大。
當今最流行的 JavaScript 庫使用宣告性方法來構建介面。React 很特別,因為它允許你在不直接操作 DOM 的情況下構建 UI。
儘管抽象程度很高,React 仍然為 JSX(用於構建介面的語言)中的 JavaScript 表示式騰出空間。
在 React 中使用 React Router DOM 以宣告方式導航與以程式設計方式導航
React Router 是最流行的用於導航 React 應用程式的庫。該庫提供了一個 <Link>
元件,它允許開發人員以宣告方式建立連結,讓你可以無縫導航到特定的 URL。
大多數情況下,你希望在單擊連結後更改 URL。但是,有時這種預設行為是不夠的,你,程式設計師,可能需要將使用者重定向到另一個 URL。
React Router 還為程式設計導航開啟了大門。開發人員可以通過操作歷史堆疊以程式設計方式導航。
該庫遵循客戶端路由的概念,允許開發人員繞過瀏覽器的預設行為並更改 URL,而無需向伺服器傳送請求。
在 React 中使用 history
物件以程式設計方式導航
要以程式設計方式導航 React 應用程式,首先,你必須訪問 history
物件。有兩種方法可以訪問這個物件:從 BrowserRouter
元件作為 prop 接收它,或者使用 .useHistory()
鉤子。
歷史
物件可以有許多不同的應用。在這種情況下,我們關心它提供的三個方法:push()
、pop()
和 replace()
。
React 開發人員可以使用這些來以程式設計方式操作 URL。
.push()
是以程式設計方式更改 URL 的最常見和最有用的方法。讓我們知道如何在不同版本的 React Router 中執行這個操作。
以程式設計方式更改 React-Router 4.0.0+
中的 URL
這個版本不包括 useHistory
鉤子,所以唯一的選擇是通過 props 訪問 history
物件。你不能在任何 React 類元件中執行此操作。
該元件必須由 <BrowserRoute>
(通常縮寫為 <Route>
)元件呈現才能訪問 history
屬性。
讓我們看一個例子。
export default class Sample extends Component {
render() {
return (
<Router>
<Route path="/" component={App}></Route>
</Router>
);
}
}
class App extends Component {
render() {
return (
<button onClick={() => this.props.history.push("samplePath")}>
Change the URL
</button>
);
}
}
App
元件中有一個元素,一個帶有事件監聽器的按鈕。我們訪問 props 中的 history
物件並使用一個引數呼叫它的 .push()
方法:我們想要導航的路徑。
但是,我們元件的 props 物件只包含歷史物件,因為
你可以檢視演示並單擊 codesandbox 上的按鈕。
以程式設計方式更改 React-Router 5.1.0+
中的 URL
當 react-router
版本 5.1.0 釋出時,核心 React 庫發生了重大變化。React 16.8 版引入了強大的鉤子,為功能元件提供了更多功能。
為了應對這些變化,react-router
5.1.0 版背後的開發人員引入了 useHistory()
掛鉤,使功能元件可以輕鬆訪問 history
物件。
讓我們看一下這個例子。
export default function Sample(props) {
return (
<BrowserRouter>
<Route>{<App></App>}</Route>
</BrowserRouter>
);
}
function App(props) {
let historyReference = useHistory();
return (
<button onClick={() => historyReference.push("boo")}>
Navigate Programmatically in React Router 5.1.0+
</button>
);
}
在這種情況下,父 Sample
元件看起來或多或少與以前相同。它有一個孩子,功能元件 App
。
孩子與前面的例子有很大的不同。它是一個功能元件,而不是像以前那樣的類元件。而且我們不通過 props 訪問 history
物件;相反,我們使用了 useHistory()
鉤子。
請注意,如果元件不是自定義的 <Route>
元件子元件,即使使用鉤子也無法訪問 history
物件。useHistory()
鉤子只會改變我們訪問 history
物件的方式。
在上面的示例中,我們將鉤子返回的 history
物件儲存在 historyReference
變數中。然後我們在變數上呼叫 .push()
方法並提供一個引數來指定路徑。
useHistory()
鉤子是編寫功能元件時訪問 history
物件的最簡單方法。
如果你更喜歡使用類元件,你仍然可以使用上一節中描述的解決方案,即使你的 react-router
安裝版本是 5.1.0 或更高版本。
你可以嘗試編輯程式碼,看看單擊演示時會發生什麼。
以程式設計方式更改 React-Router 6.0.0+
中的 URL
react-router
的最新版本包含一個新的和改進的 useNavigate()
鉤子。它返回一個專門用於程式設計導航的函式。
最新的 React Router 文件 建議使用此鉤子以程式設計方式更改 URL。
function NavigateApp(){
let navigate = useNavigate();
return (
<button onClick={() => navigate("boo")}>
Navigate Programmatically in React Router 6.1.0+
</button>
);
}
它的工作方式與 useHistory()
掛鉤大致相同。與 useHistory()
掛鉤不同,有一些區別:它返回一個函式,而不是對物件的引用。
我們將函式儲存在 navigate
變數中以直接呼叫它,而不是呼叫物件的 .push()
方法。它採用與上述方法相同的引數,一個用於指定目標路徑的字串。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn