[英]Dynamic routing using Next.js
您好,我在使用 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}`}
/>
);
}
如果我使用这个:
return (
<AuthSection
bgColor="default"
size="medium"
bgImage=""
bgImageOpacity={1}
type={router.query.type}
afterAuthPath={router.query.next || '/moderation'}
/>
);
这很完美,但显然不是我需要的。
所以基本上我需要的是,根据用户的角色,它应该重定向到它的特定页面。 因此,基于我的 Javascript 逻辑,这是有道理的,因为我正在将动态路由添加到afterAuthPath
中。 但是这个解决方案最终会出现这样的错误:
所以我输入了文档,基本上,它只向我展示了它是如何使用href
工作的,但这不是我的情况。
我该如何解决这个问题? 老实说,我在这里想不出别的东西。 我会感谢你的帮助很多人!
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;
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 或将 class 包装在 function 组件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.