React自定义PrivateRoute触发no-unused-expressions报错如何解决？

错误原因 #

你给Route组件的render属性传递的回调函数用了带花括号的箭头函数写法，花括号内部的三目运算表达式只是做了条件判断，没有被显式返回，属于未被使用的表达式，因此触发了ESLint的no-unused-expressions规则报错。

修复方案 #

有两种常用修复方式：

方案1：显式添加return语句 #

在三目运算符前加return，把运算结果作为回调函数的返回值：

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

import AuthContext from '../contexts/AuthContext';

function PrivateRoute({ children, ...rest }) {
    const auth = useContext(AuthContext);

    return(
        <Route
        {...rest}
        render={({ location }) => {
            // 新增return返回三目运算结果
            return auth.token ? (
                children
            ) : (
                <Redirect
                to={{
                    pathname: '/login',
                    state: { from: location },
                }}
              />
            )
        }} 
      />
    )
}

export default PrivateRoute;

方案2：使用箭头函数隐式返回 #

去掉回调函数的花括号，直接返回表达式，不需要写return：

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

import AuthContext from '../contexts/AuthContext';

function PrivateRoute({ children, ...rest }) {
    const auth = useContext(AuthContext);

    return(
        <Route
        {...rest}
        // 去掉花括号，直接隐式返回表达式
        render={({ location }) => auth.token ? (
                children
            ) : (
                <Redirect
                to={{
                    pathname: '/login',
                    state: { from: location },
                }}
              />
            )
        } 
      />
    )
}

export default PrivateRoute;

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