拆分PrivateRoute组件后React Router Redirect失效问题求助

嘿，我一眼就瞅到问题所在了——你的PrivateRoute组件里的导入语句犯了个低级错误，这就是跳转失效的根源！

核心问题：错把BrowserRouter当成Redirect导入 #

你在PrivateRoute里的代码是这么写的：

import { BrowserRouter as Redirect, Route } from "react-router-dom";

这里你把BrowserRouter（路由根容器组件）别名为Redirect了，但真正负责页面跳转的是react-router-dom里的Redirect组件啊！这就导致当isAuth为false时，你渲染的根本不是能触发跳转的Redirect，而是一个多余的BrowserRouter，它在已经有Router包裹的App里起不到任何跳转作用，只会让页面停留在/admin路由但不加载组件。

为啥放App.js里就正常？ #

因为App.js里你正确导入了Redirect：

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

当PrivateRoute在App.js内部时，它直接用了App里的正确Redirect，所以逻辑没问题。拆分到单独文件后，PrivateRoute自己的导入错误就显现出来了。

修复方案 #

修改PrivateRoute的导入语句，正确引入Redirect组件：

import React from 'react';
import { Redirect, Route } from "react-router-dom"; // 这里修正了导入

function PrivateRoute({component: Component, ...rest}) {
  const isAuth = false;
  return (
    <Route {...rest} render={props => isAuth ? (
      <Component {...props} />
    ) : (
      <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
    )} />
  )
}
export default PrivateRoute;

额外小提示 #

• 记得以后把硬编码的const isAuth = false换成实际的认证逻辑，比如从localStorage、Context或者Redux中获取用户登录状态
• 如果你的/admin路由不需要匹配子路由，可以加上exact属性，避免不必要的路由匹配：

<PrivateRoute path="/admin/" exact component={Admin} />

这样修改后，当用户未认证时，应该就能正常跳转到登录页面啦！

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