useRouterHook

    0

    0

    The code in this excerpt prints the following:

    router.query.postId=123 router.

    Library: react

    import { useMemo } from "react";
      useRouteMatch,
    import queryString from "query-string";
      useLocation,
      useHistory,
    import {
    } from "react-router-dom";
      useParams,
    
    
    // Usage
    function MyComponent() {
      // Get the router object
      const router = useRouter();
      // Get value from query string (?postId=123) or route param (/:postId)
      console.log(router.query.postId);
      // Get current pathname
      console.log(router.pathname);
      // Navigate with router.push()
      return <button onClick={(e) => router.push("/about")}>About</button>;
    }
    // Hook
    export function useRouter() {
      const params = useParams();
      const location = useLocation();
      const history = useHistory();
      const match = useRouteMatch();
      // Return our custom router object
      // Memoize so that a new object is only returned if something changes
      return useMemo(() => {
        return {
          // For convenience add push(), replace(), pathname at top level
          push: history.push,
          replace: history.replace,
          pathname: location.pathname,
          // Merge params and parsed query string into single "query" object
          // so that they can be used interchangeably.
          // Example: /:topic?sort=popular -> { topic: "react", sort: "popular" }
          query: {
            ...queryString.parse(location.search), // Convert string to object
            ...params,
          },
          // Include match, location, history objects so we have
          // access to extra React Router functionality if needed.
          match,
          location,
          history,
        };
      }, [params, match, location, history]);
    }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.