React Router直接重定向不保存URL，返回异常及路由重渲染问题

你的核心问题是：未登录时访问/other的即时重定向操作，没有将/other存入浏览器历史栈，导致登录后使用navigate(-1)只能回到登录页；同时开发模式下路由组件重渲染会重复添加/login历史记录，生产模式却恢复正常。

具体原因：

• 你当前的写法是在/other路由的element中直接做条件渲染，未登录时立即渲染<Navigate to="/login"/>——这属于客户端即时重定向，浏览器从未真正加载/other页面，自然不会把该路径加入历史栈。登录后跳转至/other时，历史栈顺序为[登录页, /other]，返回操作只能回到登录页。
• 开发模式下React的StrictMode会触发组件双重渲染，每次重渲染都会重新执行<Navigate>逻辑，相当于多次触发重定向，导致历史栈中出现多条/login记录；生产模式下StrictMode的双重渲染被禁用，因此不会出现该问题。

推荐使用路由保护组件封装需要登录的页面，替代直接在路由element中做条件判断，同时优化登录后的跳转逻辑：

1. 编写路由保护组件 #

import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';

// 根据你的Redux状态结构调整登录状态获取逻辑
const ProtectedRoute = () => {
  const loggedIn = useSelector(state => state.auth.loggedIn);
  const location = useLocation();

  if (!loggedIn) {
    // 保存用户原本要访问的路径，登录后可跳转回去
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return <Outlet />;
};

2. 修改路由配置 #

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Navigate to="/other"/>}/>
    {/* 用ProtectedRoute作为父路由，保护所有子路由 */}
    <Route element={<ProtectedRoute />}>
      <Route path="/other" element={<OtherPage/>}/>
    </Route>
    <Route path="/login" element={<LoginPage/>}/>
  </Routes>
</BrowserRouter>

3. 登录后跳转回原路径 #

在LoginPage中，登录成功后读取之前保存的来源路径，跳转到该路径（无来源路径时默认跳转到/other）：

import { useLocation, useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 获取登录前用户尝试访问的路径
  const from = (location.state as { from?: Location })?.from?.pathname || '/other';

  const handleLogin = () => {
    // 执行登录逻辑，派发Redux action
    // ...

    // 用replace替换当前登录页记录，避免历史栈冗余
    navigate(from, { replace: true });
  };

  return <div>Login Page</div>;
};

这样处理后：

• 未登录用户访问/other时，/other会被存入历史栈，再重定向到登录页；
• 登录后跳转回原路径，历史栈不会出现冗余的登录页记录，navigate(-1)会回到用户最初尝试访问/other之前的页面；
• 路由保护组件的逻辑只会在登录状态变化时执行，避免父组件重渲染导致的重复重定向问题。

• 路由组件（Routes、Route）在路由变化、父组件props更新时会重渲染，这是正常行为；
• 开发模式下StrictMode的双重渲染是框架特性，用于检测副作用，生产模式会自动禁用，无需额外处理。

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