React路由三元运算符多操作实现及会话项设置问题

这个问题我之前也碰到过——三元运算符的每个分支必须是单个表达式，没法直接把「设置会话项」和「返回Redirect组件」这两个操作塞在一起。不过有几个简单的方案能解决这个问题，让你同时完成会话项设置和重定向：

方案一：抽离逻辑为单独函数（最推荐，可读性高） #

把路由渲染的逻辑单独写成一个函数，在函数里可以自由执行多个操作，最后返回对应的组件：

// 先定义处理路由逻辑的函数
const renderDashboardRoute = (props) => {
  if (auth.isAuthenticated()) {
    // 已认证时返回目标组件
    return <WhateverComp auth={auth} {...props} />;
  } else {
    // 未认证时先设置会话项，再返回重定向组件
    auth.setSessionItem('redirectAfterLogin', '/dashboard'); // 这里替换成你的会话项设置逻辑
    return <Redirect to="/log-in" />;
  }
};

// 在Route中使用这个函数
<Route path="/dashboard" render={renderDashboardRoute} />

这种写法把逻辑拆分出来，代码更清晰，后期维护也方便，是最推荐的方式。

方案二：使用立即执行函数（IIFE） #

如果不想单独抽函数，也可以在三元的未认证分支里用立即执行函数，在函数内部完成会话项设置，最后返回Redirect组件：

<Route path="/dashboard" render={(props) => (
  auth.isAuthenticated() ? (
    <WhateverComp auth={auth} {...props} />
  ) : (
    // 用IIFE包裹多操作，执行后返回Redirect
    (() => {
      auth.setSessionItem('key', 'value'); // 你的会话项设置逻辑
      return <Redirect to="/log-in" />;
    })()
  )
)} />

不过这种写法可读性不如单独抽函数，适合简单逻辑的场景。

注意事项 #

• 确保会话项设置的代码写在返回Redirect之前，这样能保证重定向操作执行前，会话项已经设置完成；
• 如果是React Router v6版本，路由的写法会有变化（比如用element属性代替render），但核心逻辑还是一样的——先执行会话项设置，再返回重定向组件。

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