如何在 React Router v6 中導航外部元件？

在 React Router v6 中導航外部元件

在 React Router v5 中，建立一個全域歷史物件並將其傳遞給啟用路由器導航的外部元件。然而，這種方法在 v6 中不再可行。

自訂路由器方法

要解決這個問題，您可以建立一個自訂路由器來實例化歷史狀態，例如 React Router v6 路由器。例如，對於 BrowserRouter：

<code class="javascript">const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};</code>

這會將自訂歷史記錄物件代理到路由器中並管理導航狀態。用這個自訂的替換原來的Router：

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 也引入了stable_HistoryRouter 來存取歷史實例：

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

這會導出一個實例歷史庫的，可以在React 元件之外存取。

資料路由器

在React Router v6.4 中，資料路由器可以使用新的「獨立」導航方法：

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

此方法可以直接存取路由器的導航功能，允許使用資料路由器在外部組件中進行導航。

以上是如何在 React Router v6 中導航外部元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！