Update useRouter - fix missing import

Author: gragland

src/pages/useRouter.md

@@ -3,7 +3,7 @@ templateKey: post
 title: useRouter
 date: "2019-10-21"
 gist: https://gist.github.com/gragland/8322804ba43392d5a1e96d37d1a38218
-code: "import { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';\r\nimport queryString from 'query-string';\r\n\r\n\/\/ Usage\r\nfunction MyComponent(){\r\n  \/\/ Get the router object\r\n  const router = useRouter();\r\n\r\n  \/\/ Get value from query string (?postId=123) or route param (\/:postId)\r\n  console.log(router.query.postId);\r\n\r\n  \/\/ Get current pathname\r\n  console.log(router.pathname)\r\n\r\n  \/\/ Navigate with with router.push()\r\n  return (\r\n    <button onClick={(e) => router.push('\/about')}>About<\/button>\r\n  );\r\n}\r\n\r\n\/\/ Hook\r\nexport function useRouter() {\r\n  const params = useParams();\r\n  const location = useLocation();\r\n  const history = useHistory();\r\n  const match = useRouteMatch();\r\n\r\n  \/\/ Return our custom router object\r\n  \/\/ Memoize so that a new object is only returned if something changes\r\n  return useMemo(() => {\r\n    return {\r\n      \/\/ For convenience add push(), replace(), pathname at top level\r\n      push: history.push,\r\n      replace: history.replace,\r\n      pathname: location.pathname,\r\n      \/\/ Merge params and parsed query string into single \"query\" object\r\n      \/\/ so that they can be used interchangeably.\r\n      \/\/ Example: \/:topic?sort=popular -> { topic: \"react\", sort: \"popular\" }\r\n      query: {\r\n        ...queryString.parse(location.search), \/\/ Convert string to object\r\n        ...params\r\n      },\r\n      \/\/ Include match, location, history objects so we have\r\n      \/\/ access to extra React Router functionality if needed.\r\n      match,\r\n      location,\r\n      history\r\n    };\r\n  }, [params, match, location, history]);\r\n}"
+code: "import { useMemo } from \"react\";\r\nimport { useParams, useLocation, useHistory, useRouteMatch } from 'react-router-dom';\r\nimport queryString from 'query-string';\r\n\r\n\/\/ Usage\r\nfunction MyComponent(){\r\n  \/\/ Get the router object\r\n  const router = useRouter();\r\n\r\n  \/\/ Get value from query string (?postId=123) or route param (\/:postId)\r\n  console.log(router.query.postId);\r\n\r\n  \/\/ Get current pathname\r\n  console.log(router.pathname)\r\n\r\n  \/\/ Navigate with with router.push()\r\n  return (\r\n    <button onClick={(e) => router.push('\/about')}>About<\/button>\r\n  );\r\n}\r\n\r\n\/\/ Hook\r\nexport function useRouter() {\r\n  const params = useParams();\r\n  const location = useLocation();\r\n  const history = useHistory();\r\n  const match = useRouteMatch();\r\n\r\n  \/\/ Return our custom router object\r\n  \/\/ Memoize so that a new object is only returned if something changes\r\n  return useMemo(() => {\r\n    return {\r\n      \/\/ For convenience add push(), replace(), pathname at top level\r\n      push: history.push,\r\n      replace: history.replace,\r\n      pathname: location.pathname,\r\n      \/\/ Merge params and parsed query string into single \"query\" object\r\n      \/\/ so that they can be used interchangeably.\r\n      \/\/ Example: \/:topic?sort=popular -> { topic: \"react\", sort: \"popular\" }\r\n      query: {\r\n        ...queryString.parse(location.search), \/\/ Convert string to object\r\n        ...params\r\n      },\r\n      \/\/ Include match, location, history objects so we have\r\n      \/\/ access to extra React Router functionality if needed.\r\n      match,\r\n      location,\r\n      history\r\n    };\r\n  }, [params, match, location, history]);\r\n}"
 ---
 
 If you use React Router you might have noticed they recently added a number of useful hooks, specifically <code>useParams</code>, <code>useLocation</code>, <code>useHistory</code>, and use <code>useRouteMatch</code>. But let's see if we can make it even simpler by wrapping them up into a single <code>useRouter</code> hook that exposes just the data and methods we need. In this recipe we show how easy it is to compose multiple hooks and combine their returned state into a single object. It makes a lot of sense for libraries like React Router to offer a selection of low-level hooks, as using only the hook you need can minimize unnecessary re-renders. That said, sometimes you want a simpler developer experience and custom hooks make that easy.