React路由组件能否在if/else块中使用？未登录重定向求助

一、先排查你三种写法的常见错误 #

1. Route的render属性用三元表达式的错误修正 #

你可能漏写了return（箭头函数用大括号包裹时必须显式return），正确写法：

// 简洁版（无大括号自动return）
<Route exact path="/home" render={() => 
  localStorage.getItem('token') ? <Home /> : <Redirect to="/login" />
} />

// 带大括号需显式return
<Route exact path="/home" render={() => {
  return localStorage.getItem('token') ? <Home /> : <Redirect to="/login" />
}} />

2. Route子元素直接写if/else的错误修正 #

JSX中不能直接插入if/else语句，只能用表达式。可以改成三元表达式，或者把判断逻辑抽成函数：

// 三元表达式写法
<Route exact path="/home">
  {localStorage.getItem('token') ? <Home /> : <Redirect to="/login" />}
</Route>

// 抽成函数写法
const renderHomeContent = () => {
  if (localStorage.getItem('token')) {
    return <Home />;
  } else {
    return <Redirect to="/login" />;
  }
};

<Route exact path="/home">{renderHomeContent()}</Route>

3. 封装HomeRoute组件的错误修正 #

封装私有路由时，必须传递路由相关props给目标组件，同时正确展开Route的剩余属性：

const HomeRoute = ({ component: Component, ...rest }) => {
  return (
    <Route 
      {...rest}
      render={(props) => 
        localStorage.getItem('token') ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

// 使用方式
<HomeRoute exact path="/home" component={Home} />

二、正确实现登录校验与重定向的几种方式 #

1. React Router v6+ 直接在Route的element属性处理 #

如果用的是React Router v6，写法已更新（用Navigate替代Redirect，路由需嵌套在Routes中）：

import { Routes, Route, Navigate } from 'react-router-dom';

<Routes>
  <Route path="/login" element={<Login />} />
  <Route 
    path="/home" 
    element={localStorage.getItem('token') ? <Home /> : <Navigate to="/login" replace />} 
  />
</Routes>

2. 封装通用私有路由组件（推荐） #

适合多个需要登录校验的路由场景，复用性更强：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  // 严谨判断：转换为布尔值，避免空字符串被误判为已登录
  const isLoggedIn = !!localStorage.getItem('token');
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" replace />;
};

// 使用方式
<Routes>
  <Route path="/login" element={<Login />} />
  {/* 所有需要登录的路由嵌套在PrivateRoute下 */}
  <Route element={<PrivateRoute />}>
    <Route path="/home" element={<Home />} />
    <Route path="/profile" element={<Profile />} />
  </Route>
</Routes>

3. 组件内部校验重定向 #

适合单个组件的场景，在组件的useEffect中做校验：

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

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

  useEffect(() => {
    if (!localStorage.getItem('token')) {
      // replace: true 避免用户回退到未登录状态的页面
      navigate('/login', { replace: true });
    }
  }, [navigate]);

  return (
    // Home组件内容
    <div>首页内容</div>
  );
};

三、额外注意事项 #

• 校验token时用!!localStorage.getItem('token')更严谨，避免空字符串、null被误判为已登录状态。
• 确认你的React Router版本：v5和v6写法差异极大，若你用v6却写了v5的代码，会直接导致路由失效。
• 网络请求异常时，检查未登录重定向后的/login页面资源是否正常加载，或路由匹配是否错误导致请求了不存在的资源。

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