使用 Next.js 的动态路由

Question

您好，我在使用 Next.js 的一些动态路由时遇到问题。我的文件名为[type].js。在这个文件中，我有以下代码：

import React from 'react';
import AuthSection from 'components/AuthSection';
import { useRouter } from 'next/router';
import { useAuth } from "../../util/auth";

function AuthPage(props) {
  const router = useRouter();
  const auth = useAuth();
  let getAuthRoles = auth.user ? auth.user.roles[0] : ""
  let pageSrc = ""

  if(getAuthRoles === "Moderation Staff"){
    pageSrc = "/moderation"
  }else if(getAuthRoles === "Super Admin"){
    pageSrc = "/superUser"
  }

  return (
    <AuthSection
      bgColor="default"
      size="medium"
      bgImage=""
      bgImageOpacity={1}
      type={router.query.type}
      afterAuthPath={router.query.next || `${pageSrc}`}
    />
  );

}

1. 我从 Auth0 中提取了一些身份验证角色
2. 使用三元条件获取用户角色，以便读取并将其发送给用户
3. 根据用户的角色重定向用户角色页面的条件语句
4. 将创建登录路由的组件，这里我使用的是页面路由。

如果我使用这个：

return (
    <AuthSection
      bgColor="default"
      size="medium"
      bgImage=""
      bgImageOpacity={1}
      type={router.query.type}
      afterAuthPath={router.query.next || '/moderation'}
    />
  );

这很好用，但显然不是我需要的。

所以基本上我需要的是，根据用户的角色，它应该重定向到它的特定页面。因此，根据我的 Javascript 逻辑，这是有道理的，因为我将动态路由添加到 afterAuthPath 中。但是这个解决方案最终会出现这样的错误：

所以我输入了文档，基本上，它只向我展示了使用 href 的工作原理，但我的情况并非如此。

我该如何解决这个问题？老实说，我在这里想不出别的东西。非常感谢你们的帮助！

编辑：我在下面添加了我的 AuthSection.js 组件：

import React from "react";
import Section from "components/Section";
import Container from "@material-ui/core/Container";
import SectionHeader from "components/SectionHeader";
import Auth from "components/Auth";

function AuthSection(props) {
  // Values for each auth type
  const allTypeValues = {
    signin: {
      // Top title
      title: "Welcome back",
      // Submit button text
      buttonText: "Sign in",
      // Link text to other auth types
      linkTextSignup: "Create an account",
      linkTextForgotpass: "Forgot Password?",
    },
    signup: {
      title: "Get yourself an account",
      buttonText: "Sign up",
      linkTextSignin: "Sign in",
    },
    forgotpass: {
      title: "Get a new password",
      buttonText: "Reset password",
    },
    changepass: {
      title: "Choose a new password",
      buttonText: "Change password",
    },
  };

  // Ensure we have a valid auth type
  const currentType = allTypeValues[props.type] ? props.type : "signup";

  // Get values for current auth type
  const typeValues = allTypeValues[currentType];

  return (
    <Section
      bgColor={props.bgColor}
      size={props.size}
      bgImage={props.bgImage}
      bgImageOpacity={props.bgImageOpacity}
    >
      <Container maxWidth="xs">
        <SectionHeader
          title={allTypeValues[currentType].title}
          subtitle=""
          size={4}
          textAlign="center"
        />
        <Auth
          type={currentType}
          typeValues={typeValues}
          providers={props.providers}
          afterAuthPath={props.afterAuthPath}
          key={currentType}
        />
      </Container>
    </Section>
  );
}

export default AuthSection;

更新 - 建议代码

import React, { useEffect, useState } from "react";
import AuthSection from 'components/AuthSection';
import { useRouter } from 'next/router';
import { useAuth } from "../../util/auth";

function AuthPage(props) {
  const router = useRouter();
  const auth = useAuth();
  const [pageSrc, setPageSrc] = useState("");

  useEffect(() => {
    const getAuthRoles = auth.user ? auth.user.roles[0] : "";
    let newPageSrc = "";
  
    if(getAuthRoles === "Moderation Staff"){
      newPageSrc = "/moderation"
    }else if(getAuthRoles === "Super Admin"){
      newPageSrc = "/superUser"
    }
  
    setPageSrc(newPageSrc);
  }, [auth]);

  return (
    <AuthSection
      bgColor="default"
      size="medium"
      bgImage=""
      bgImageOpacity={1}
      type={router.query.type}
      afterAuthPath={router.query.next || `${pageSrc}`}
    />
  );

}

Answer 1

useRouter 是一个钩子。

这段代码怎么样？

const [pageSrc, setPageSrc] = useState("");

useEffect(() => {
  const getAuthRoles = auth.user ? auth.user.roles[0] : "";
  let newPageSrc = "";

  if(getAuthRoles === "Moderation Staff"){
    newPageSrc = "/moderation"
  }else if(getAuthRoles === "Super Admin"){
    newPageSrc = "/superUser"
  }

  setPageSrc(newPageSrc);
}, [auth]);

useRouter 是一个 React Hook，这意味着它不能与类一起使用。您可以使用 withRouter 或将您的类包装在一个函数组件中。

https://nextjs.org/docs/api-reference/next/router#userouter