Javascript React Router：如何通过键入路径重定向到组件时更改路径 URL

我只想阻止用户访问/profile页，直到用户登录，如果用户试图通过手动键入104进入路径访问个人资料页，那么他/她将重定向到/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>
    );