React使用Redirect实现私有路由不跳转，不使用useHistory如何解决？

安全阿岳

2026-10-6

问题原因&修复方案

1. 核心错误：导入语句写错

你当前的导入把BrowserRouter别名为Redirect，导致你实际渲染的是路由根容器组件，而非重定向组件，自然不会生效：

// 错误写法
import { BrowserRouter as Redirect, Route } from "react-router-dom";

2. 不同react-router-dom版本修复方案

如果你使用的是v5版本

直接修正导入语句即可，原有逻辑无需改动：

import React from 'react';
import { useSelector } from 'react-redux';
// 修正导入，直接引入Redirect组件
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = ({component: Component, ...rest}) => {
  const {isAuthenticated,loading} = useSelector(state => state.auth);
  return (
    <Route 
      {...rest} 
      render={props => !isAuthenticated && !loading ?
        (<Redirect to='/login' />) :
        (<Component {...props} />)
      } 
    />
  )
}
export default PrivateRoute

如果你使用的是v6版本

v6版本已经移除Redirect组件和Route的render属性，需要改用Navigate组件和element属性，调整后的写法如下：

import React from 'react';
import { useSelector } from 'react-redux';
import { Navigate, Route } from "react-router-dom";

const PrivateRoute = ({component: Component, ...rest}) => {
  const {isAuthenticated,loading} = useSelector(state => state.auth);
  return (
    <Route 
      {...rest} 
      element={!isAuthenticated && !loading ?
        (<Navigate to='/login' replace />) :
        (<Component />)
      } 
    />
  )
}
export default PrivateRoute