Dynamic routing using Next.js

Question

Hello I am having an issue using some dynamic routes with Next.js. My file is called [type].js. Inside this file I have the following code:

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. I pull some auth roles from Auth0
2. Using a ternary condition to get the user roles in order to read it and send it to the user
3. A conditional statement that will redirect the user role page depending on which role the user has
4. A component that will create the sign-in route, which here I am using the page route.

If I use this:

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

This works perfectly, but obvious is not what I need.

So basically what I need is, depending on what role the user has, it should redirect to its specific page. So based on my Javascript logic, this would make sense cause I'm adding a dynamic route into the afterAuthPath. But this solution ends up with an error like this:

So I entered in the documentation, and basically, it only shows me how it would work using href but that is not my case.

How can I solve this? I honestly can't think of something else right here. I'll appreciate your help a lot guys!

EDIT: I add my AuthSection.js component below:

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;

UPDATE - suggestion code

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 is a hook.

how about this code?

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 is a React Hook, meaning it cannot be used with classes. You can either use withRouter or wrap your class in a function component.

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