React Router 4 编程式重定向：登录时跳转至指定/来源页面

我来帮你搞定这个Login组件的重定向问题～先从你当前需要的重定向到/dashboard开始，再给你铺垫下以后要做来源页面重定向的思路：

一、当前需求：登录后重定向到/dashboard #

这里有两种常用的实现方式，都是基于react-router-dom（你的代码里用了Router组件，应该是用的这个包）：

方式1：使用Redirect组件 #

在Login组件里，当登录验证成功后，通过渲染Redirect组件来完成跳转，代码示例如下：

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

class Login extends React.Component {
  state = {
    isLoggedIn: false,
    // 这里可以添加用户名、密码等登录相关状态
  };

  handleLogin = () => {
    // 先编写你的登录逻辑，比如调用后端API验证账号密码
    // 验证成功后更新登录状态
    this.setState({ isLoggedIn: true });
  };

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

    // 未登录状态下渲染登录表单
    return (
      <div>
        <h2>登录</h2>
        {/* 这里放置你的用户名、密码输入框等表单元素 */}
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

export default Login;

方式2：编程式导航（history.push()） #

如果你更喜欢用代码逻辑控制跳转，可以用withRouter高阶组件把路由的history对象注入到Login组件的props里，然后调用push方法完成跳转：

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

class Login extends React.Component {
  handleLogin = () => {
    // 完成登录验证后，直接调用history.push跳转到目标页面
    this.props.history.push('/dashboard');
  };

  render() {
    return (
      <div>
        <h2>登录</h2>
        {/* 登录表单区域 */}
        <button onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

// 必须用withRouter包裹组件，才能获取到history等路由相关props
export default withRouter(Login);

二、为后续“重定向到来源页面”做准备 #

等你以后要实现用户访问Login前的来源页面跳转，可以提前做这些准备：

• 首先，在需要登录才能访问的页面路由里，把当前页面的路径作为state传递给Login页面，比如：

// 举个例子，比如Dashboard页面需要登录才能访问
<Route 
  path="/dashboard" 
  render={(props) => 
    isAuthenticated ? ( // isAuthenticated是你判断用户是否登录的变量
      <Dashboard />
    ) : (
      <Redirect to={{
        pathname: "/login",
        state: { from: props.location.pathname } // 把当前来源路径传递给Login页面
      }} />
    )
  } 
/>

• 然后在Login组件登录成功后，读取传递过来的来源路径，没有的话就默认 fallback到/dashboard：

// 编程式导航的写法
const { from } = this.props.location.state || { from: { pathname: '/dashboard' } };
this.props.history.push(from);

// Redirect组件的写法
<Redirect to={from || '/dashboard'} />

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