我已經看過相當多的 React 教程，但是每當他們談論使用 React-router 進行導航時，他們都只展示使用 Link 元件的方式。一旦有人開始處理他/她自己的專案，他們遇到的第一個問題就是如何以程式設計方式進行路由，這基本上意味著除了點擊 \ 中包含的內容之外的其他方式進行路由。成分。
這個部落格的主要目的是為那些來這裡尋找這個問題答案的人提供一個避難所。
1.\成分
我們可以使用 \ 進行重定向只需傳遞我們想要重定向到的路由並渲染元件即可。它已經載入到react-router-dom 庫中。
import { Redirect } from "react-router-dom";使用此方法最簡單的方法是在元件狀態內維護重定向屬性。
state = { redirect: null };
render() {
if (this.state.redirect) {
return <Redirect to={this.state.redirect} />
}
return(
// Your Code goes here
)
}每當你想要重定向到另一個路徑時，你可以簡單地改變狀態來重新渲染元件，從而渲染\成分。
this.setState({ redirect: "/someRoute" });筆記
這是除 \ 之外的建議導航方式。方法。
在帖子的最後詳細討論了。
這種方法的缺點是，當我們想要直接從 redux 操作重新導向時，我們無法這樣做。
2.使用歷史鉤子
從 5.1.2 版本開始，react-router 附帶了一些新的鉤子，可以幫助我們存取路由器的狀態。
現在，我們只需要討論 useHistory 鉤子。
import { useHistory } from "react-router-dom";
function App() {
let history = useHistory();
}之後，我們可以使用 .push() 方法重定向到我們想要的任何路由。
history.push('/someRoute')3.歷史道具
作為 \ 的直接子級的每個元件元件接收歷史物件作為道具。這是保存 React Router 會話歷史記錄的同一個歷史記錄（庫）。因此，我們可以使用它的屬性來導航到所需的路徑。
this.props.history.push("/first");我們在這裡遇到的一個常見問題是，在不是 \ 的直接子級的元件中元件中，不存在歷史道具。使用 withRouter 函數可以輕鬆解決這個問題。
3.1.帶路由器
withRouter 是react-router-dom庫中提供的一個函數，它可以幫助我們存取不是 \ 直接子級的元件中的歷史記錄道具成分。
使用 Router 導入
import { withRouter } from "react-router-dom";現在為了在我們的元件中取得歷史屬性，我們需要在匯出它時用 withRouter 包裝我們的元件。
export default withRouter(yourComponent);我們現在可以像上面一樣存取歷史記錄來完成我們所需的導航。
4.建立歷史
我們上面學到的方法可以涵蓋我們在建立 React 應用程式時遇到的大多數情況，那麼為什麼要使用第四種方法呢？
每次我們需要從 redux 操作重定向時，我們總是必須將歷史記錄傳遞給該操作，從而不必要地增加參數數量。因此，可以使用此方法來獲得更簡潔的程式碼。
在此方法中，我們建立自訂歷史記錄實例，可以將其匯入其他文件中以進行重定向。
// Inside /utils/history.js
import createHistory from "history/createBrowserHistory";
export default createHistory();作為 \使用它自己的歷史記錄並且不接受任何外部歷史記錄屬性，我們必須使用 \而不是它。
import { Router } from "react-router-dom";
import history from "./utils/history";
function App(){
return(
<Router history={history}>
// Your Routes go here
<Router>
)
}之後，我們可以將此歷史實例匯入到我們想要重新導向的任何檔案中。
import history from "./utils/history";
history.push("/somePath");筆記
從本質上講，React 是一種建立 UI 的聲明式方法。
聲明式方法是一種表達計算邏輯而不描述其控制流或不描述幕後實際發生的情況的方法。
由於這個原因，推薦的導航方式除\正在使用\成分。
使用這裡提到的其他方法並沒有什麼壞處，只是它們並不完全符合 React 的願景。
儲存庫
我的 Github 個人資料上提供了上述方法的完整工作實作。如果有人想看到這些方法在專案中實際執行，請隨意探索。
{% github https://github.com/projectescape/blogs-reference %}
原文出處：https://dev.to/projectescape/programmatic-navigation-in-react-3p1l
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式