英文:
Warning: Maximum update depth exceeded
问题
在我的 app.js 文件中，我想要检查用户是否已登录，如果是，将其重定向到选择的URL。如果没有登录，我想要自动重定向到 /connexion URL（登录页面）。如果用户已登录，然后我想要检查用户的个人资料是否已完善，如果是，它应该将我重定向到所选的URL，否则我希望它将我重定向到完整信息页面 /information。
我以前只有一个检查已登录的检查，但是当我添加了信息检查后，我开始出现错误。我知道错误来自于我的 useEffect，以及它在每个检查中不断切换，但是我不确定如何修复它。
以下是我的代码：
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [tokenChecked, setTokenChecked] = useState(false);
const { profile } = useStateContext();
useEffect(() => {
const token = sessionStorage.getItem("token");
setIsLoggedIn(token ? true : false);
setTokenChecked(true);
}, []);
return (
<Router>
{tokenChecked ? (
<Routes>
<Route element={<NavbarLayout />}>
<Route path="/" exact element={<HomePage />} />
<Route path="/about" exact element={<AboutPage />} />
<Route path="/how-it-works" exact element={<HowItWorks />} />
</Route>
<Route element={<NoNavbarLayout />}>
<Route path="/connexion" exact element={<UserLogin />} />
<Route path="/récupérer" exact element={<UserRecovery />} />
<Route path="/register-user" exact element={<UserRegister />} />
<Route
path="/register-tech"
exact
element={<TechnicianRegister />}
/>
<Route path="/register-admin" exact element={<AdminRegister />} />
</Route>
<Route element={<ConfirmLayout />}>
<Route
path="/confirmation"
exact
element={<AccountConfirmation />}
/>
<Route path="/nonconnecté" exact element={<UserRedirectLMsg />} />
<Route
path="/validation/:id/:confirm"
exact
element={<AccountValidation />}
/>
</Route>
{isLoggedIn === true ? (
<>
{profile === 'finished' ? (
<>
<Route element={<ConfirmLayout />}>
<Route path="/encours" exact element={<UserPending />} />
<Route
path="/information"
exact
element={
<Elements stripe={stripePromise}>
<UserInfo />
</Elements>
}
/>
</Route>
<Route element={<DashboardLayout />}>
<Route
path="/nouvel-appareil"
exact
element={<UserNewDevice />}
/>
<Route path="/new-project" exact element={<NewProject />} />
<Route
path="/demande-contrat"
exact
element={<NewContract />}
/>
<Route path="/user-dash" exact element={<UserDash />} />
<Route path="/profile" exact element={<UserProfile />} />
<Route
path="/user-history"
exact
element={<UserHistory />}
/>
<Route path="/navigation" exact element={<Compte />} />
<Route
path="/user-notification"
exact
element={<UserNotification />}
/>
<Route
path="/user-projets-details/:id"
exact
element={<UserProjectDetails />}
/>
<Route
path="/user-intervention-details/:id"
exact
element={<InterventionDetail />}
/>
<Route
path="/user-details/:id"
exact
element={<UserDetail />}
/>
<Route
path="/user-claim-details/:id"
exact
element={<UserClaimsDetail />}
/>
<Route
path="/reclamations"
exact
element={<UserClaims />}
/>
<Route path="/browse" exact element={<SearchGrid />} />
<Route
path="/technician-dash"
exact
element={<TechnicianDash />}
/>
<Route
path="/technician-profile"
exact
element={<TechnicianProfile />}
/>
<Route
path="/technician-projets"
exact
element={<TechnicianProjects />}
/>
<Route
path="/technician-history"
exact
element={<UserHistory />}
/>
<Route
path="/technician-projets-details/:id"
exact
element={<UserProjectDetails />}
/>
<Route
path="/product/:id"
exact
element={<UserNewProductDetail />}
/>
<Route
path="/admin-notification"
exact
element={<AdminNotification />}
/>
<Route path="/new-user" exact element={<AddUser />} />
<Route path="/litiges" exact element={<Litige />} />
<Route
path="/réclamations"
exact
element={<Reclamation />}
/>
<Route path="/users" exact element={<UsersList />} />
</Route>
<Route element={<NoNavbarLayout />}>
<Route
path="/register-type"
element={<Navigate to="/navigation" />}
/>
</Route>
</>
) : (
<>
<Route
path="*"
element={<Navigate to="/information" replace />}
/>
</>
)}
</>
) : isLoggedIn === false ? (
<>
<Route
path="*"
element={<Navigate to="/connexion" replace />}
/>
</>
) : null}
</Routes>
) : null}
</Router>
);
};
export default App;
请注意，这是您提供的代码的翻译部分，不包括代码本身。如果您需要更多帮助或有其他问题，请随时提问。
英文:
In my app.js I want to check if first the user is logged in and want it to direct me to the URL picked. If not, I want it to automatically direct me to the /connexion URL (login page) if the user is logged in I want it then to check if the user profile is complete, if so, it should direct me to the picked URL or else I want it to direct me to the complete info page /information
I used to have only one check the logged in check however when I added the information check I started getting I know that the error is coming from my useEffect and the fact it keeps toggling in every check however I am not sure how to fix it:
this is my code:
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [tokenChecked, setTokenChecked] = useState(false);
const { profile } = useStateContext();
useEffect(() => {
const token = sessionStorage.getItem("token");
setIsLoggedIn(token ? true : false);
setTokenChecked(true);
}, []);
return (
<Router>
{tokenChecked ? (
<Routes>
<Route element={<NavbarLayout />}>
<Route path="/" exact element={<HomePage />} />
<Route path="/about" exact element={<AboutPage />} />
<Route path="/how-it-works" exact element={<HowItWorks />} />
</Route>
<Route element={<NoNavbarLayout />}>
{/*<Route path="/register-type" exact element={<LoginPick />} />*/}
<Route path="/connexion" exact element={<UserLogin />} />
<Route path="/récupérer" exact element={<UserRecovery />} />
<Route path="/register-user" exact element={<UserRegister />} />
<Route
path="/register-tech"
exact
element={<TechnicianRegister />}
/>
<Route path="/register-admin" exact element={<AdminRegister />} />
</Route>
<Route element={<ConfirmLayout />}>
<Route
path="/confirmation"
exact
element={<AccountConfirmation />}
/>
<Route path="/nonconnecte" exact element={<UserRedirectLMsg />} />
<Route
path="/validation/:id/:confirm"
exact
element={<AccountValidation />}
/>
</Route>
{isLoggedIn === true ? (
<>
{profile === 'finished' ? (
<>
<Route element={<ConfirmLayout />}>
<Route path="/encours" exact element={<UserPending />} />
<Route
path="/information"
exact
element={
<Elements stripe={stripePromise}>
<UserInfo />
</Elements>
}
/>
</Route>
<Route element={<DashboardLayout />}>
<Route
path="/nouvel-appareil"
exact
element={<UserNewDevice />}
/>
<Route path="/new-project" exact element={<NewProject />} />
<Route
path="/demande-contrat"
exact
element={<NewContract />}
/>
<Route path="/user-dash" exact element={<UserDash />} />
<Route path="/profile" exact element={<UserProfile />} />
<Route
path="/user-history"
exact
element={<UserHistory />}
/>
<Route path="/navigation" exact element={<Compte />} />
<Route
path="/user-notification"
exact
element={<UserNotification />}
/>
<Route
path="/user-projets-details/:id"
exact
element={<UserProjectDetails />}
/>
<Route
path="/user-intervention-details/:id"
exact
element={<InterventionDetail />}
/>
<Route
path="/user-details/:id"
exact
element={<UserDetail />}
/>
<Route
path="/user-claim-details/:id"
exact
element={<UserClaimsDetail />}
/>
<Route
path="/reclamations"
exact
element={<UserClaims />}
/>
<Route path="/browse" exact element={<SearchGrid />} />
<Route
path="/technician-dash"
exact
element={<TechnicianDash />}
/>
<Route
path="/technician-profile"
exact
element={<TechnicianProfile />}
/>
<Route
path="/technician-projets"
exact
element={<TechnicianProjects />}
/>
<Route
path="/technician-history"
exact
element={<UserHistory />}
/>
<Route
path="/technician-projets-details/:id"
exact
element={<UserProjectDetails />}
/>
<Route
path="/product/:id"
exact
element={<UserNewProductDetail />}
/>
<Route
path="/admin-notification"
exact
element={<AdminNotification />}
/>
<Route path="/new-user" exact element={<AddUser />} />
<Route path="/litiges" exact element={<Litige />} />
<Route
path="/réclamations"
exact
element={<Reclamation />}
/>
<Route path="/users" exact element={<UsersList />} />
</Route>
<Route element={<NoNavbarLayout />}>
<Route
path="/register-type"
element={<Navigate to="/navigation" />}
/>
</Route>
</>
):(
<>
<Route
path="*"
element={<Navigate to="/information" replace />}
/>
</>
)}
</>
) : isLoggedIn === false ? (
<>
<Route
path="*"
element={<Navigate to="/connexion" replace />}
/>
</>
) : null}
</Routes>
) : null}
</Router>
);
};
export default App;
答案1
得分: 2
这个错误是因为您试图渲染具有相同路径的多个路由。
<Route
path="*"
element={<Navigate to="/information" replace />}
/>
它无法访问信息路由，因为个人资料尚未完成。
英文:
This error is caused because you are trying to render multiple Routes with the same path.
<Route
path="*"
element={<Navigate to="/information" replace />}
/>
It can't access the information route because the profile is not completed yet.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论