ReactJS中登录成功后如何重定向到其他页面

先纠正你现有代码的问题 #

你写的Redirect exact path="/Study"是错误用法，Redirect 组件的目标地址属性是to不是path，该写法适用于react-router v5版本。

不同场景的实现方案 #

场景1：路由层全局拦截跳转（也就是你现在用的条件渲染思路） #

• react-router v5 版本写法

import { Redirect, Route } from 'react-router-dom';
import Home from './Home';
import Study from './Study';

function App() {
  // user 为登录状态标识，可存在本地存储、状态管理库、React Context中
  const user = localStorage.getItem('loginStatus');
  
  return (
    <>
      <Route 
        exact 
        path="/" 
        render={() => user ? <Redirect to="/Study" /> : <Home />} 
      />
      <Route exact path="/Study" component={Study} />
      {/* 其他路由配置 */}
    </>
  )
}

• react-router v6 版本写法
  v6已经移除了Redirect组件，替换为Navigate组件：

import { Navigate, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Study from './Study';

function App() {
  const user = localStorage.getItem('loginStatus');
  
  return (
    <Routes>
      <Route 
        path="/" 
        element={user ? <Navigate to="/Study" replace /> : <Home />} 
      />
      <Route path="/Study" element={<Study />} />
      {/* 其他路由配置 */}
    </Routes>
  )
}

场景2：登录接口请求成功后直接跳转（编程式导航） #

不需要在路由层写条件判断，直接在登录请求的回调函数里调用跳转API即可：

• react-router v5 版本写法

import { useHistory } from 'react-router-dom';

function LoginPage() {
  const history = useHistory();

  const handleLoginSubmit = async (loginFormData) => {
    // 调用登录接口
    const loginResult = await request.post('/api/login', loginFormData);
    if (loginResult.success) {
      // 存储登录状态后跳转
      localStorage.setItem('loginStatus', '1');
      history.push('/Study');
    }
  }
}

• react-router v6 版本写法
  v6移除了useHistory，替换为useNavigate：

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

function LoginPage() {
  const navigate = useNavigate();

  const handleLoginSubmit = async (loginFormData) => {
    const loginResult = await request.post('/api/login', loginFormData);
    if (loginResult.success) {
      localStorage.setItem('loginStatus', '1');
      navigate('/Study');
    }
  }
}

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