React Router：手动输入路径跳转至登录页后如何修改URL路径？

你的问题核心是仅条件渲染组件但未触发路由导航，所以URL会停留在/profile。下面是具体解决方法：

1. 基础修复：使用<Navigate>组件跳转 #

首先从react-router-dom引入Navigate组件，将原来直接渲染<Login />的逻辑替换为导航到/login页面，同时用replace属性替换当前路由记录（避免用户点击返回时又回到/profile）。

另外纠正你代码里的两处问题：

• useEffect的依赖写成[profileUser]会导致订阅逻辑重复执行，应改为空数组[]，因为onAuthStateChanged是一次性订阅；
• 未登录时错误调用了setUserName(null)，应该改为setProfileUser(null)。

修改后的代码：

// App.js
import { Routes, Route, Navigate } from 'react-router-dom'; // 引入Navigate

const [profileUser, setProfileUser] = useState(null); // 初始值设为null更合理

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((user) => {
    setProfileUser(user); // 统一更新用户状态
  });

  // 组件卸载时取消订阅，避免内存泄漏
  return () => unsubscribe();
}, []); // 依赖改为空数组

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

2. 进阶方案：封装私有路由组件 #

如果有多个需要权限校验的页面，建议封装通用的PrivateRoute组件，提升代码复用性：

// components/PrivateRoute.jsx
import { Navigate, Outlet } from 'react-router-dom';

export default function PrivateRoute({ isAuthenticated }) {
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
}

在App.js中使用该组件：

// App.js
<Routes>
  <Route path="/login" element={<Login />} />
  <Route path="/signup" element={<SignUp />} />
  {/* 用PrivateRoute保护所有需要权限的路由 */}
  <Route element={<PrivateRoute isAuthenticated={!!profileUser} />}>
    <Route path="/profile" element={<Profile loggedUser={profileUser} />} />
    {/* 其他需要权限的页面可直接添加在此 */}
  </Route>
</Routes>

这种方式把权限校验逻辑抽离，后续新增权限页面无需重复编写判断逻辑。

内容的提问来源于stack exchange，提问作者Mohit