React Router Dom v6实现路由保护时报Nothing was returned错误怎么解决

错误根因 #

你遇到的渲染报错，是因为PrivateRoute组件的未登录逻辑分支缺少return语句，组件没有返回合法的React节点。

修复方案 #

直接修改PrivateRoute组件的代码，给else分支加上return即可，其余路由配置符合react-router-dom v6的使用规范，无需改动：

import { Navigate } from "react-router-dom";

const PrivateRoute = function ({ children }) {
  // 用true/false模拟用户登录/登出状态，实际项目中可从全局状态/本地缓存读取登录凭证校验结果
  let isAuthenticated = false;
  if (isAuthenticated) {
    return children;
  } else {
    // 此处补充return语句即可解决报错，增加replace属性避免登录后点击后退返回登录页
    return <Navigate to="/login" replace />;
  }
};

export default PrivateRoute;

可选优化 #

如果需要实现登录成功后自动跳回用户原本要访问的dashboard路径，可以调整代码携带跳转参数：

修改PrivateRoute代码 #

import { Navigate, useLocation } from "react-router-dom";

const PrivateRoute = function ({ children }) {
  const location = useLocation();
  let isAuthenticated = false;
  if (isAuthenticated) {
    return children;
  } 
  // 携带当前访问路径跳转到登录页
  return <Navigate to="/login" state={{ from: location.pathname }} replace />;
};

登录成功后跳转逻辑示例 #

// 登录接口调用成功后执行
import { useNavigate, useLocation } from "react-router-dom";

// 登录组件内的逻辑
const navigate = useNavigate();
const location = useLocation();
// 如果有来源路径就跳回来源页，没有就默认跳转到dashboard首页
const targetPath = location.state?.from || "/dashboard";
navigate(targetPath, { replace: true });

内容的提问来源于stack exchange，提问作者Emma R.