在这种情况下如何使用“history.push”？ 反应路由器dom V5

Question

I have a snippet of code that somewhat looks like this: 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;

This is just how the file was designed.

I am attempting to make the history.push go to another page but due to the rules of React Hook, it will not let me.

I tried putting the redirect in its own file but that also did not work: 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;

What can I do to get around this?

Answer 1

If you need to access the history object outside a React component you've basically a couple options.

• Create a global custom history object that your router uses and that can be imported for use in code external to React.

  1. Create and export a custom history object to match the router being used.

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

  2. Import the history object and pass it to your app's router.

      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. Import the history object to your utility code.

      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;

• Pass history in to the utility function for it to use.

   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;

  In component using the someFile utility function, use the useHistory hook to access the history object and pass to the utility.

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