求助：如何使用React Router v6实现登录后跳转首页？

针对React Router v6（当前主流版本） #

• 使用useNavigate钩子实现跳转

  1. 在Login组件中导入钩子：

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

  2. 在组件内部初始化导航函数：

     const navigate = useNavigate();
     

  3. 在登录触发函数中调用跳转：

     const handleLogin = () => {
       // 这里编写登录逻辑（如账号密码验证、后端接口请求）
       navigate('/principal'); // 执行跳转至Principal页面
     };
     

• 验证路由配置正确性
  确保整个应用已被BrowserRouter包裹，且Principal页面的路由路径匹配：

  // App.jsx或路由配置文件
  import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
  import Login from './components/Login';
  import Principal from './components/Principal';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/principal" element={<Principal />} />
          {/* 可添加默认路由，访问根路径时重定向到登录页 */}
          <Route path="/" element={<Navigate to="/login" />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

类组件场景（若使用类组件） #

React Router v6中类组件需通过withRouter高阶组件获取导航能力：

import { withRouter } from 'react-router-dom';
import React from 'react';

class Login extends React.Component {
  handleLogin = () => {
    // 登录逻辑
    this.props.navigate('/principal');
  };

  render() {
    return <button onClick={this.handleLogin}>Login</button>;
  }
}

export default withRouter(Login);

常见排查点 #

• 确认登录函数已正确绑定到按钮的onClick事件，检查葡萄牙语变量/函数名是否存在拼写错误
• 若登录涉及异步操作（如后端接口请求），需在异步操作成功的回调中执行跳转，避免逻辑顺序错误
• 若之前使用v5版本的Redirect组件或history.push方法，v6已废弃这些用法，需替换为navigate

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