如何通过React Router实现正确重定向？含认证场景需求

嘿，针对你用React 16.3和React Router 4.3搭建认证重定向的需求，我给你整理了一套实用的方案，完全适配你的包版本～

首先假设你已经通过Redux管理了用户的登录状态（比如store里的auth.isLoggedIn字段），我们可以通过自定义路由组件来实现你的核心需求（我补全了你未写完的第三点常规逻辑：未登录用户访问非/signin路径时重定向到/signin）：

核心需求梳理 #

• 未登录用户可正常访问/signin
• 已登录用户访问/signin时自动重定向到/
• 未登录用户访问非/signin路径时，自动重定向到/signin

1. 实现私有路由组件（PrivateRoute） #

这个组件用来保护所有需要登录才能访问的页面，未登录用户访问时会被重定向到登录页。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

// 接收组件、登录状态等参数
const PrivateRoute = ({ component: Component, isLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      // 已登录则渲染目标组件，否则重定向到登录页
      isLoggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/signin" />
      )
    }
  />
);

// 从Redux store中获取登录状态
const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn // 这里根据你的store实际结构调整字段名
});

// 连接Redux并导出组件
export default connect(mapStateToProps)(PrivateRoute);

2. 实现公共登录路由组件（PublicRoute） #

这个组件专门处理登录页的访问权限，已登录用户访问时会被重定向到首页。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

const PublicRoute = ({ component: Component, isLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      // 未登录则渲染登录组件，已登录则重定向到首页
      !isLoggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/" />
      )
    }
  />
);

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn // 同样根据你的store结构调整
});

export default connect(mapStateToProps)(PublicRoute);

3. 在路由配置中使用自定义组件 #

现在用我们写的PrivateRoute和PublicRoute替换原生的Route组件，完成路由配置：

import React from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute'; // 引入自定义私有路由
import PublicRoute from './PublicRoute';   // 引入自定义登录路由
import Home from './components/Home';      // 首页组件
import SignIn from './components/SignIn';  // 登录页组件

const AppRouter = () => (
  <Router>
    <Switch>
      {/* 登录页路由：已登录用户访问会跳首页 */}
      <PublicRoute path="/signin" component={SignIn} />
      {/* 首页路由：未登录用户访问会跳登录页 */}
      <PrivateRoute path="/" component={Home} exact />
      {/* 其他需要登录的路由都用PrivateRoute包裹 */}
      {/* <PrivateRoute path="/dashboard" component={Dashboard} /> */}
      {/* <PrivateRoute path="/profile" component={UserProfile} /> */}
    </Switch>
  </Router>
);

export default AppRouter;

额外说明 #

• 如果你还没实现Redux的登录状态管理，需要先编写对应的action和reducer，比如登录成功时dispatch一个LOGIN_SUCCESS action，将isLoggedIn设为true；登出时dispatchLOGOUT action，设为false。
• Switch组件的作用是匹配到第一个符合条件的路由就停止渲染，所以一定要把更具体的路由（比如/signin）放在前面，避免被通配路由（比如/）提前匹配。

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