Блог

Здравствуйте, у меня возникла проблема с использованием некоторых динамических маршрутов с 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}`}
    />
  );

}
 

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 — это перехват реакции, что означает, что его нельзя использовать с классами. Вы можете либо использовать withRouter, либо обернуть свой класс в функциональный компонент.

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