React:设置一个路径作为登录页

Question

所以我试图设置一个路径作为我的登录页，并将主应用程序保留在root上。

例如：假设应用程序是myapp.com。当用户点击URL时，我希望他被重定向到myapp.com/welcome，它用作登录页。

然而，在该页面上有一个CTA按钮，它将他重定向到主应用程序，即根路径，因此为myapp.com。

所以我的问题是，如果(在根上(我使用<Redirect to="/welcome" />在登录页上导航用户，那么我就被卡住了，我无法访问主应用程序。

有什么办法让它发挥作用吗？

Answer 1

我已经有一段时间没有使用React Router了，所以我有点生疏，但我自己找到了答案。

不管怎样，我愿意和大家分享这个问题。它可能会帮助其他人。

我的解决方案：

import { useEffect, useState } from 'react';
import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
import LandingContainer from './landing/LandingContainer';
import MainContainer from './MainContainer';
const App = () => {
const [isFirstLoading, setIsFirstLoading] = useState(true);
useEffect(() => {
if (isFirstLoading) {
setIsFirstLoading(false);
}
}, [isFirstLoading]);
return (
<Switch>
<Route path="/welcome" component={LandingContainer} />
{isFirstLoading && <Redirect to="/welcome" />}
<Route path="/" component={MainContainer} />
</Switch>
);
};
export default withRouter(App);

请记住，此解决方案不包括会话处理，因此，如果手动刷新页面或删除/welcome部分，则会重定向您。然而，有了NavLink，它就像一种魅力。

欢迎任何进一步的建议或改进！