React Router Dom实现登录成功后精准路径跳转的方法

嘿，我来帮你搞定这个登录重定向的问题！其实用react-router-dom实现这个需求非常简单，核心就是在登录验证通过后触发路由跳转。下面分两种常见的版本（v5和v6）给你详细说明：

首先完善你的App路由配置 #

不管用哪个版本，你都需要先在App组件里添加首页（Home）的路由规则：

如果你用的是 react-router-dom v5 #

import Authen from './Pages/Authen'; 
import Home from './Pages/Home'; 
import { BrowserRouter as Router, Route } from 'react-router-dom'; 

class App extends Component { 
  render() { 
    return ( 
      <div className="App"> 
        <Router> 
          <div> 
            {/* 登录页面路由 */}
            <Route exact path="/" component={Authen}/> 
            {/* 首页路由 */}
            <Route path="/home" component={Home}/> 
          </div> 
        </Router> 
      </div> 
    ); 
  } 
}

如果你用的是 react-router-dom v6（当前主流版本） #

v6的路由API有不少变化，需要用Routes包裹路由，并且用element属性传入组件：

import Authen from './Pages/Authen'; 
import Home from './Pages/Home'; 
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 

class App extends Component { 
  render() { 
    return ( 
      <div className="App"> 
        <Router> 
          <div> 
            <Routes>
              {/* 登录页面路由 */}
              <Route path="/" element={<Authen />} />
              {/* 首页路由 */}
              <Route path="/home" element={<Home />} />
            </Routes>
          </div> 
        </Router> 
      </div> 
    ); 
  } 
}

然后在Authen登录组件里实现重定向逻辑 #

接下来在你的登录组件（Authen）里，完成登录验证后触发跳转：

情况1：Authen是类组件（v5） #

如果你的Authen是类组件，react-router-dom会自动给被Route渲染的组件注入history属性，直接调用history.push()就能跳转：

import React, { Component } from 'react';

class Authen extends Component {
  // 登录处理函数
  handleLogin = () => {
    // 这里替换成你的实际登录验证逻辑（比如调用后端API）
    const loginSuccess = true; // 假设验证通过

    if (loginSuccess) {
      // 重定向到首页
      this.props.history.push('/home');
    }
  };

  render() {
    return (
      <div>
        <h2>登录页面</h2>
        {/* 这里添加用户名、密码输入框 */}
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

export default Authen;

情况2：Authen是函数组件（v5） #

函数组件可以用useHistory钩子来获取history对象：

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

const Authen = () => {
  const history = useHistory();

  const handleLogin = () => {
    const loginSuccess = true; // 实际验证逻辑
    if (loginSuccess) {
      history.push('/home');
    }
  };

  return (
    <div>
      <h2>登录页面</h2>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Authen;

情况3：Authen是函数组件（v6） #

v6里useHistory被替换成了useNavigate，用法类似：

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

const Authen = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    const loginSuccess = true; // 实际验证逻辑
    if (loginSuccess) {
      navigate('/home');
    }
  };

  return (
    <div>
      <h2>登录页面</h2>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Authen;

可选：用Redirect组件实现（v5） #

除了调用history/navigate方法，你也可以在组件里通过条件渲染Redirect组件来实现重定向：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

class Authen extends Component {
  state = {
    isLoggedIn: false
  };

  handleLogin = () => {
    const loginSuccess = true;
    if (loginSuccess) {
      this.setState({ isLoggedIn: true });
    }
  };

  render() {
    // 如果已登录，直接重定向到首页
    if (this.state.isLoggedIn) {
      return <Redirect to="/home" />;
    }

    return (
      <div>
        <h2>登录页面</h2>
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

export default Authen;

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