如何创建自定义反应钩子？

Question

I have an addQuery function that sets the url with query parameters, like /hello/?page=1&role=admin etc. I want to use that function into multiple files for updating the URL and duplicating that function does not make sense.

export default function Hello() {
  const location = useLocation();
  const history = useHistory();

  const addQuery = (key, value) => {
    let pathname = location.pathname;
    let searchParams = new URLSearchParams(location.search);
    searchParams.set(key, value);
    history.push({
      pathname: pathname,
      search: searchParams.toString()
    });
  };

  return (
    <div>
      <h1>hello world</h1>
      <button onClick={() => addQuery("page", 1)}>page 1</button>
      <button onClick={() => addQuery("page", 2)}>page 2</button>
      <button onClick={() => addQuery("user_role", "admin")}>Admin role</button>
    </div>
  );
}

Is there a way to extract the logic into a separate hook?

Here is the codesandbox link:https://codesandbox.io/s/add-query-hook-js2k7?file=/src/home.js

Answer 1

If you want to extract the addQuery function to a separate hook you have to return the desired function from the hook and call it when required.

Solution, in useAddQuery.js

import { useLocation, useHistory } from "react-router-dom";
import { useCallback } from "react";

export function useAddQuery() {
  const location = useLocation();
  const history = useHistory();

  const addQuery = useCallback(
    (key, value) => {
      let pathname = location.pathname;
      let searchParams = new URLSearchParams(location.search);
      searchParams.set(key, value);
      history.push({
        pathname: pathname,
        search: searchParams.toString()
      });
    },
    [location, history]
  );

  return addQuery;
}

Working codesandbox example codesandbox