如何在沒有 Mixins 的情況下以程式設計方式在 React Router 中導航？

在沒有Mixins 的React Router 中進行程式設計導航

React Router 可以在上下文中實現無縫導航，但理解其用法可能會令人困惑。讓我們探索如何在不使用 mixins 的情況下以程式設計方式導覽。

React Router 透過上下文提供歷史對象，提供對推送和替換方法的存取以進行操作。然而，隨著 React 的進步，您有多種程式導航選項：

1。利用 withRouter HOC（不支援 React Router 6）：

withRouter HOC 將歷史物件注入到元件 props 中，因此可以直接存取導航方法。

import { withRouter } from 'react-router-dom';

const Button = withRouter(({ history }) => {
  const handleClick = () => { history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
});

2.渲染無路徑路由（不支援React Router 6）：

渲染沒有路徑的Route 元件，它將始終匹配當前位置並傳遞歷史屬性。

import { Route } from 'react-router-dom';

const Button = () => {
  return (
    <Route render={({ history }) => {
      const handleClick = () => { history.push('/new-location'); };
      return <button onClick={handleClick}>Click Me!</button>;
    }} />
  );
};

3。使用上下文（複雜且已棄用）：

此方法需要深入了解 React 的上下文，應謹慎使用。您需要定義一個元件上下文類型來存取歷史記錄屬性。

import React from 'react';

const Button = (props, context) => {
  const handleClick = () => { context.history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
};

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

對於大多數場景，選項 1 和 2 很簡單，建議使用。

以上是如何在沒有 Mixins 的情況下以程式設計方式在 React Router 中導航？的詳細內容。更多資訊請關注PHP中文網其他相關文章！