在這種情況下如何使用“history.push”？ 反應路由器dom V5

Question

我有一段看起來像這樣的代碼： https ://codesandbox.io/s/youthful-field-4jwmxc?file=/src/SomeFile.js

// SomeFile.js

import { useHistory } from "react-router-dom";

/*
Cannot put it here either
const history = useHistory();
*/

export const SomeFile = () => {
  console.log("something?");
  handlers.SWITCH_PAGE();
};

const handlers = {
  SWITCH_PAGE: () => {
    try {
      console.log("triggered");
      /*
      const history = useHistory();
      Cannot put it here
      */
      history.push({
        pathname: "/someLocation"
      });
    } catch (e) {
      console.error(e);
    }
  }
};

export default SomeFile;

這就是文件的設計方式。

我試圖讓 history.push 轉到另一個頁面，但由於 React Hook 的規則，它不會讓我這樣做。

我嘗試將重定向放在自己的文件中，但這也不起作用： https ://codesandbox.io/s/xenodochial-hypatia-c1fli1?file=/src/SomeFile.js

// Redirect.js

import { useHistory } from "react-router-dom";

export const Redirect = (redirect) => {
  function Redir(redirect) {
    try {
      const history = useHistory();
      history.push(redirect);
    } catch (e) {
      console.error(e);
    }
  }

  Redir(redirect);

  return <></>;
};

export default Redirect;

// SomeFile.js

import Redirect from "./Redirect";

export const SomeFile = () => {
  console.log("something?");
  handlers.SWITCH_PAGE();
};

const handlers = {
  SWITCH_PAGE: () => {
    try {
      console.log("triggered");

      /*
      history.push({
        pathname: "/someLocation"
      });
      */
      Redirect("/someLocation");
    } catch (e) {
      console.error(e);
    }
  }
};

export default SomeFile;

我能做些什么來解決這個問題？

Answer 1

如果你需要訪問 React 組件之外的history對象，你基本上有幾個選擇。

• 創建你的路由器使用的全局自定義歷史對象，並且可以導入以在 React 外部的代碼中使用。

  1. 創建並導出自定義歷史對象以匹配正在使用的路由器。

      import { createBrowserHistory } from 'history'; const history = createBroswerHistory(); export default history;

  2. 導入history對象並將其傳遞給您的應用程序的路由器。

      import { Router, // <-- low-level router Switch, Route } from "react-router-dom"; import history from "../path/to/history"; export default function App() { return ( <Router history={history}> // <-- pass history as prop <Switch> <Route path="/SomeLocation"> <SomeLocation /> </Route> <Route path="/"> <Home /> </Route> </Switch> </Router> ); }

  3. 將history對象導入您的實用程序代碼。

      import history from "../path/to/history"; export const someFile = () => { console.log("something?"); handlers.SWITCH_PAGE(); }; const handlers = { SWITCH_PAGE: () => { try { console.log("triggered"); history.push("/someLocation"); } catch (e) { console.error(e); } } }; export default someFile;

• 將history傳遞給實用程序函數以供其使用。

   export const someFile = ({ history }) => { console.log("something?"); handlers.SWITCH_PAGE({ history }); }; const handlers = { SWITCH_PAGE: ({ history }) => { try { console.log("triggered"); history.push("/someLocation"); } catch (e) { console.error(e); } } }; export default someFile;

  在使用someFile實用程序函數的組件中，使用useHistory掛鈎訪問history對象並傳遞給實用程序。

   import { useHistory } from 'react-router-dom'; import someFile from '../path/to/someFile'; const Component = () => { const history = useHistory(); ... const callback = () => { ... someFile(history); ... }; ... };