在 npm 启动后 React.js 返回空白页

如何解决在 npm 启动后 React.js 返回空白页

我目前正在关注一位已将其代码库上传到 here 的 YouTuber。我一直在密切关注他的视频，但由于某种原因，当我在控制台中输入 npm start 时，我成功编译了项目，但浏览器中没有任何显示。我试过多次重启，但无济于事，因为我是 React.js 的新手，我不知道如何调试这个应用程序。我的越野车分支是 here。非常感谢任何想法或建议。

更新： 我已将错误范围缩小到 Button.js 组件，但我不确定为什么注释掉的代码不起作用。

// import React from 'react';
// import { Link } from 'react-router-dom';
// import './Button.css';

// const STYLES = ['btn__primary','btn__outline'];
// const SIZES = ['btn__medium','btn__large'];

// export const Button = ({
//   children,//   type,//   onClick,//   buttonStyle,//   buttonSize
// }) => {
//   const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
//   const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];

//   return (
//     <Link to='/' className='btn__mobile'>
//       <Button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </Button>
//     </Link>
//   );
// };

import React from 'react';
import { Link } from 'react-router-dom';
import './Button.css';

export function Button() {
  return (
    <Link to='sign-up'>
      <button className='btn'>Sign Up</button>
    </Link>
  );
}

解决方法

您是否在浏览器中使用 localhost:3000？ React 在端口 3000 上运行。确认您在浏览器中位于该地址，然后尝试在创建 react-app 的正确目录中再次运行 npm start。

,

似乎我试图使用以下代码从其内部调用 Button 组件：

//       <Button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </Button>

Button 组件应该是这样的 HTML 元素：

//       <button
//         className={`btn ${checkButtonStyle} ${checkButtonSize}`}
//         onClick={onClick}
//         type={type}
//       >
//       {children}
//       </button>