目标:如果登录用户试图手动转到/auth/signin，我希望将他/她重定向到主页。

登录页/组件：

const Signin = ({ currentUser }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const { doRequest, errors } = useRequest({
        url: '/api/users/signin',
        method: 'post',
        body: {
            email, password
        onSuccess: () => Router.push('/')
    useEffect(() => {
        const loggedUser = () => {
            if (currentUser) {
                Router.push('/');
        loggedUser();
    }, []);

自定义_app组件：

const AppComponent = ({ Component, pageProps, currentUser }) => {
    return (
            <Header currentUser={currentUser} />
            <Component {...pageProps} currentUser={currentUser} />
AppComponent.getInitialProps = async (appContext) => {
    const client = buildClient(appContext.ctx);
    const { data } = await client.get('/api/users/currentuser');
    let pageProps = {};
    if (appContext.Component.getInitialProps) {
        pageProps = await appContext.Component.getInitialProps(appContext.ctx);
    return {
        pageProps,
        ...data
export default AppComponent;

发布：

我尝试过这样做，但是这会导致轻微的延迟，因为它不会被服务器端呈现。延迟，我的意思是:在重定向之前，它显示了我不想显示的页面。

我可以使用一个加载标志或一系列如果其他条件，但这将是一个工作，什么是最好的方法/实践来处理这个问题？

是我提出的另一个解决方案：

• I构建了一个重定向钩子:

import Router from 'next/router';
export default (ctx, target) => {
    if (ctx.res) {
        // server 
        ctx.res.writeHead(303, { Location: target });
        ctx.res.end();
    } else {
        // client
        Router.push(target);
}

• ，然后我为受保护的路由制作了2个HOC(用于登录和注销用户)：

import React from 'react';
import redirect from './redirect';
const withAuth = (Component) => {
    return class AuthComponent extends React.Component {
        static async getInitialProps(ctx, { currentUser }) {
            if (!currentUser) {
                return redirect(ctx, "/");