How to use "useRouter()" from next.js in a class component?

Question

I was trying to get the queries from my url pattern like localhost:3000/post?loc=100 by using useRouter() from "next/router" and fetching some data using that id from my server. It worked when I used it in a Stateless Functional Component.

But the page showing "Invalid hook call" then. I tried calling getInitalProps() of a Stateless Functional Component, but it didn't work there either and showed the same error. Is there any rule to use this method?

I was developing a front-end using React Library and Next.js Framework.

constructor(props) {
  this.state = {
    loc: useRouter().query.loc,
    loaded: false
  };
}

[This](https://github.com/zeit/next.js/issues/7479) conversation might be useful, but it seems that `useRouter` feature is still experimental. — Kate Orlova, Jul 14 '19 at 12:55
You can normally access location info from the context value received in the getInitialProps lifecycle. — Gaël S, Jul 14 '19 at 14:25
Possible duplicate of [How can I use React hooks in React classic \`class\` component?](https://stackoverflow.com/questions/53371356/how-can-i-use-react-hooks-in-react-classic-class-component) — Aprillion, Jul 14 '19 at 16:11

Aprillion · Accepted Answer · 2020-10-09T09:14:59.330

38

Hooks can be used only inside functional components, not inside classes. I would recommend to use withRouter HOC as per next.js documentation:

use the useRouter hook, or withRouter for class components.

Or see From Classes to Hooks if you want to switch to hooks.

In general, it's possible to create a wrapper functional component to pass custom hooks into class components via props (but not useful in this case):

const MyClassWithRouter = (props) => {
  const router = useRouter()
  return <MyClass {...props} router={router} />
}

class MyClass...
  constructor(props) {
    this.state = {
      loc: props.router.query.loc,
      loaded: false
    };
  }

edited Oct 09 '20 at 09:14

answered Jul 14 '19 at 16:06

Aprillion

21,510
5
55
89

2

New link: https://nextjs.org/docs/api-reference/next/router#withrouter because link to readme is [outdated](https://github.com/vercel/next.js/tree/78775954f2384d75f8ba0a2775cfcf7e5a50f355#using-a-higher-order-component) – 700 Software Oct 08 '20 at 19:02

score 8 · Answer 2 · answered May 21 '21 at 13:33

withRouter example

https://stackoverflow.com/a/57029032/895245 mentioned it, but a newbie like me needed a bit more details. A more detailed/direct description would be:

Function component:

import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  return (
    <div>{ router.query.id }</div>
  )
}

Class component equivalent:

import { withRouter } from 'next/router'
import React from "react";

export default withRouter(class extends React.Component {
  render() {
    return (
      <div>{ this.props.router.query.id }</div>
    )
  }
})

I tested this out more concretely as follows. First I took vercel/next-learn-starter/basics-final/pages/posts/[id].js and I hacked it to use the router:

diff --git a/basics-final/pages/posts/[id].js b/basics-final/pages/posts/[id].js
index 28faaad..52954d3 100644
--- a/basics-final/pages/posts/[id].js
+++ b/basics-final/pages/posts/[id].js
@@ -4,13 +4,17 @@ import Head from 'next/head'
 import Date from '../../components/date'
 import utilStyles from '../../styles/utils.module.css'
 
+import { useRouter } from "next/router"
+
 export default function Post({ postData }) {
+  const router = useRouter();
   return (
     <Layout>
       <Head>
         <title>{postData.title}</title>
       </Head>
       <article>
+        <div>router.query.id = {router.query.id}</div>
         <h1 className={utilStyles.headingXl}>{postData.title}</h1>
         <div className={utilStyles.lightText}>
           <Date dateString={postData.date} />

Then, I ran it as:

git clone https://github.com/vercel/next-learn-starter
cd next-learn-starter
git checkout 5c2f8513a3dac5ba5b6c7621d8ea0dda881235ea
cd next-learn-starter
npm install
npm run dev

Now when I visit: http://localhost:3000/posts/ssg-ssr I see:

router.query.id = ssg-ssr

Then I converted it to the class equivalent:

import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'

import { withRouter } from 'next/router'
import React from "react"


export default withRouter(class extends React.Component {
  render() {
    return (
      <Layout>
        <Head>
          <title>{this.props.postData.title}</title>
        </Head>
        <article>
          <div>router.query.id = {this.props.router.query.id}</div>
          <h1 className={utilStyles.headingXl}>{this.props.postData.title}</h1>
          <div className={utilStyles.lightText}>
            <Date dateString={this.props.postData.date} />
          </div>
          <div dangerouslySetInnerHTML={{ __html: this.props.postData.contentHtml }} />
        </article>
      </Layout>
    )
  }
})

export async function getStaticPaths() {
  const paths = getAllPostIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

and everything seemed to be unchanged.

Tested on Next.js 10.2.2.

How to use "useRouter()" from next.js in a class component?

2 Answers2

Linked