使用 Next.js 的动态路由

Posted 2023-03-30

【中文标题】使用 Next.js 的动态路由

【英文标题】：Dynamic routing using Next.js

【发布时间】：2022-01-10 06:50:49

【问题描述】：

您好，我在使用 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`
    />
  );

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

如果我使用这个：

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`
    />
  );

【问题讨论】：

您的 AuthSection 组件是什么样的？

对不起@AliKlein，AuthSection 与插值有关吗？我只是好奇，但基本上从 Auth0 获取所有 Auth 服务，我将代码添加到我的帖子中。

发生错误是因为您在代码中的某处设置了 href，其值为 /auth/[type]（假设在 next/link 组件上），但这并未显示在您共享的代码中的任何地方.

@juliomalves 是的，我确实有href，但它们属于代码的另一个组件，只会呈现链接。 （如 Navbar、Footer 等）最奇怪的是它不允许我进行条件渲染。

您的AuthSection 中的afterAuthPath 去哪儿了？它在那里使用链接或路由器吗？如果是这样，您是否使用 as path 道具？

【参考方案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

【讨论】：

不幸的是，这不能正常工作。将我的代码添加到帖子中，以便您了解我是如何实现您提供给我的代码的。我仍然收到我在帖子中提到的错误:(

直到useEffect被执行，假设会发生错误，因为pageSrc是""。我建议在渲染返回上方使用if(!pageSrc) return <></>;。这是我的浅薄知识，但我希望它有所帮助。