javascript - react 路由器 : How to change path URL when redirect to a component by typing path?

Question

如果用户尝试通过键入 /profile 访问个人资料页面，我只想阻止用户访问 /profile 页面，直到用户登录 手动进入路径，然后他/她将重定向到 /login 页面。所以我已经成功地将用户重定向到 /login 页面，但是如果他们通过在路径 url 中键入 /profile 来重定向，路径没有改变。

重定向完成后如何更改路径？

代码:-

//App.js

const [profileUser, setProfileUser] = useState();
useEffect(() => {
    auth.onAuthStateChanged((user) => {
        if (user) {
            setProfileUser(user);
        } else {
            setUserName(null);
        }
    });
    }, [profileUser]);

//JSX 
return (
        <div>
            <Header loggedUser={profileUser} />
            <MainWrapper>
                <Routes>
                    <Route path="/login" element={<Login />} />
                    <Route path="/signup" element={<SignUp />} />
                    <Route
                        path="/profile"
                        element={
                            !profileUser ? <Login /> : <Profile loggedUser={profileUser} />
                        }
                    />
                </Routes>
            </MainWrapper>
            <Footer />
        </div>
    );

Answer 1

您实际上想要重定向到 "/login" 路由，而不是呈现 Login 组件。

<Routes>
  <Route path="/login" element={<Login />} />
  <Route path="/signup" element={<SignUp />} />
  <Route
    path="/profile"
    element={profileUser
      ? <Profile loggedUser={profileUser} />
      : <Navigate to="/login" replace /> // <-- Redirect
    }
  />
</Routes>