使用 React Router DOM 進行程式化導航

Irakli Tchigladze 2023年1月30日
  1. 在 React 中使用 React Router DOM 以宣告方式導航與以程式設計方式導航
  2. 在 React 中使用 history 物件以程式設計方式導航
使用 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 Tchigladze avatar Irakli Tchigladze avatar

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

相關文章 - React Router