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

1. 在 React 中使用 React Router DOM 以宣告方式導航與以程式設計方式導航
2. 在 React 中使用 history 物件以程式設計方式導航

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() 方法。它採用與上述方法相同的引數，一個用於指定目標路徑的字串。