Question

nextjs getInitialProps函数中有什么方法可以使用或访问nextRouter /历史记录。

const ViewPost: NextPage<EditPostProps> = (props): React.ReactElement<void> => {
  const router = useRouter(); // works here 

}

ViewPost.getInitialProps = async (ctx: Context): Promise<EditPostProps> => {
  const router = useRouter(); // doesn't work 
  // ctx props doesn't have history
}
export default withRouter(ViewPost);

我的api类将历史记录或路由器作为参数，因此需要一个，但是我无法在getInitialProps中访问其中一个。请问我是否可以访问它？任何帮助将不胜感激。

Answer 1

next/router是客户端路由器，因此在getInitialProps中进行服务器端渲染期间不可访问。

由于不建议使用Next.js 9.3 getInitialProps。

您可以在getServerSideProps内的服务器端重定向用户：

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async context => {
    context.res.writeHead(302, { Location: '/login' })
    context.res.end()
    return {props: {}}
}

响应（context.res）是Node.js http.ServerResponse类的实例。

GetServerSideProps

http.ServerResponse

How to redirect user's browser URL to a different page in Nodejs?

Answer 2

路由器是一个单例。你可以这样做：

import Router from 'next/router'

然后在 getInitialProps() 内：

Router.push('/path');

在getInitialProps中使用nextRouter

2 个答案: