When I try to redirect using Router.push() I get the following error:
TypeError: next_router__WEBPACK_IMPORTED_MODULE_3__.Router.push is not a function
I am trying to migrate from create-react-app to next js.
const redirectUser = () => {
if (true) {
Router.push('/');
}
};
I had to import like so:
// works
import Router from "next/router";
// dont
import { Router } from "next/router";
Don't add curly bracket while importing Router from next/router
Use this:
import Router from "next/router";
you have to take into account when you use next.js that the redirects should be in getInitialProps method in order to avoid unnecessary render components.
for example
const MyComponent = ()=>{
return <tag> {/* ... */} </tag>
}
MyComponent.getInitialProps = ({res}) => {
if (res) {
/* serve-side */
res.writeHead(302, {
Location: 'http://example.com'
})
res.end()
} else {
/* client-side */
Router.push('http://example.com')
}
return {}
}
import Router from 'next/router?