React Router中使用Navigate组件报语法错误：Unexpected token, expected ','求助

问题概述 #

学习React Router权限路由时，使用Navigate组件处理页面跳转，出现Unexpected token, expected ','语法错误，以下是相关代码，请求排查解决。

报错文件：IsAuth.jsx #

import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
const IsAuth = () => {
  if (true) {
    return <Navigate to="/login" />;
  }
};
export default IsAuth;

调用代码：index.tsx #

import IsAuth from './Login/IsAuth';
const createRoutes = (
(xxxxxx)=>{
...
    return (
        <IsAuth>
         <Routes>
         <Routes/>
        <IsAuth/>
    );
}
)
export default createRoutes;

错误原因及修复方案 #

1. 组件缺少必选返回值 #

React函数组件必须始终返回一个React元素、null或undefined，当前IsAuth组件仅在if(true)分支返回了<Navigate>，未处理else分支，导致语法解析错误。

2. 组件未正确处理子元素 #

你将IsAuth作为容器组件包裹<Routes>，但当前组件没有接收children props，也没有返回子元素，会导致权限验证通过后无法渲染目标路由。

3. createRoutes语法错误 #

外层多余的括号包裹箭头函数，导致语法解析失败，正确的箭头函数声明不需要额外外层括号。

修复后的代码 #

IsAuth.jsx

import React from 'react';
import { Navigate } from 'react-router-dom';

// 接收children props，用于渲染权限通过后的内容
const IsAuth = ({ children }) => {
  // 替换为实际权限判断逻辑，比如检查token是否存在
  const isLoggedIn = false;

  // 未登录则跳转到登录页，replace避免回退到无权限页面
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }

  // 权限验证通过，渲染子组件
  return children;
};

export default IsAuth;

index.tsx

import IsAuth from './Login/IsAuth';
import { Routes, Route } from 'react-router-dom';

// 修正箭头函数语法
const createRoutes = (xxxxxx) => {
  // ...你的其他路由逻辑
  return (
    <IsAuth>
      <Routes>
        {/* 这里添加你的受保护路由 */}
        <Route path="/home" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </IsAuth>
  );
};

export default createRoutes;

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