安装react-router-dom后出现此前未有的语法错误，请求协助解决

之前代码运行正常，安装react-router-dom后出现语法错误，相关代码如下：

import React from 'react';
import {FaGithub, FaLinkedin, FaCodepen} from 'react-icons/fa';
import {HiOutlineMailOpen} from 'react-icons/hi';
import {BsFillPersonLinesFill} from 'react-icons/bs';

const SocialLinks = () => {

    const links = [
        {
            id:1,
            child: (
                <>
                GitHub <FaGithub size={30}/>
                </>
            ),
            href: '(blank for purpose of posting here)',
            style: 'rounded-tr-md'
        },

        {
            id:2,
            child: (
                <>
                Codepen <FaCodepen size={30}/>
                </>
            ),
            href: '(blank for purpose of posting here)',
        },

报错截图：

问题分析与解决步骤 #

1. 补全不完整的代码结构
   你提供的代码中links数组未添加闭合的]，SocialLinks函数也缺少闭合的}和返回逻辑，这是导致语法错误的直接原因。补全后的完整代码参考：

   import React from 'react';
   import {FaGithub, FaLinkedin, FaCodepen} from 'react-icons/fa';
   import {HiOutlineMailOpen} from 'react-icons/hi';
   import {BsFillPersonLinesFill} from 'react-icons/bs';
   
   const SocialLinks = () => {
       const links = [
           {
               id:1,
               child: (
                   <>
                   GitHub <FaGithub size={30}/>
                   </>
               ),
               href: '(blank for purpose of posting here)',
               style: 'rounded-tr-md'
           },
           {
               id:2,
               child: (
                   <>
                   Codepen <FaCodepen size={30}/>
                   </>
               ),
               href: '(blank for purpose of posting here)',
           }
       ];
   
       return (
           <div className="social-links">
               {links.map(link => (
                   <a 
                       key={link.id} 
                       href={link.href} 
                       className={link.style}
                       target="_blank"
                       rel="noopener noreferrer"
                   >
                       {link.child}
                   </a>
               ))}
           </div>
       );
   };
   
   export default SocialLinks;
   

2. 排查react-router-dom带来的配置冲突

   • 确认项目中@babel/preset-react依赖已安装，babel.config.js中已正确配置该预设：

     module.exports = {
         presets: ['@babel/preset-env', '@babel/preset-react']
     };
     

   • 清除开发服务器缓存后重启：

     npm start -- --clear-cache
     # 若用yarn则执行
     yarn start --clear-cache
     

   • 检查ESLint规则，若有新增的JSX相关报错，可临时在.eslintrc中调整规则，比如关闭react/jsx-no-undef（仅测试用，后续需排查根本原因）。

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