使用React图标onClick导航至首页出现空白页问题求助

问题根源：图标组件导入错误 #

你代码里的import { Bix } from 'react-icons/bi';写错了——react-icons的Bi系列图标都是大写Bi开头，比如关闭叉号的正确组件名是BiX（注意大小写）。导入一个不存在的组件会直接引发渲染错误，导致整个页面空白。

修复方案 #

1. 先修正导入语句：

import { BiX } from 'react-icons/bi';

2. 然后替换JSX中的图标组件，顺便加个鼠标指针样式提示用户可点击：

<BiX onClick={handleClick} style={{ cursor: 'pointer' }} />

完整修复后的代码 #

import { useNavigate } from 'react-router';
import { BiX } from 'react-icons/bi';

export default function BlackWhite() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/');
  };

  return (
    <div className="BlackWhite">
      <h1>Black and white</h1>
      {/* <button onClick={handleClick}>Back to homepage</button> */}
      <BiX onClick={handleClick} style={{ cursor: 'pointer' }} />
    </div>
  );
}

另外提一句：JSX里的注释不能用//，得用{/* ... */}，虽然这不是页面空白的原因，但还是规范一点更好。

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