React Todo应用：如何让“关于我”按钮默认处于激活状态

核心问题分析 #

你的代码存在几个关键问题导致默认激活失效：

• useState未设置初始值，默认是undefined，首次渲染时clicked === index永远不成立
• onClick事件错误使用this.index（函数组件不存在this），逻辑存在冲突
• 路由配置和按钮跳转路径不匹配，且/buttons路由会触发无限循环渲染（该路由又渲染了App组件）

修复步骤 #

1. 设置useState初始值
   "Обо мне"对应数组索引1，且默认路由/指向该页面，所以初始值设为1：

   const [clicked, setClicked] = useState(1);
   

2. 简化onClick逻辑
   去掉错误的this.index，点击时直接设置对应索引即可：

   onClick={() => setClicked(index)}
   

3. 修正路由配置

   • 删除会导致无限循环的/buttons路由
   • 确保路由路径和按钮to属性匹配，让跳转逻辑正常生效

4. 可选：利用NavLink自带激活状态
   NavLink支持自动添加激活类名，无需手动维护clicked状态，更简洁：

   <NavLink 
     to={`/buttons/${index}`}
     className={({ isActive }) => classnames(styles.button, { [styles.selected]: isActive })}
   >
     {item}
   </NavLink>
   

修改后的完整代码 #

const App = () => {
  const buttons = ["Дела", "Обо мне"];
  // 初始激活索引1（对应Обо мне）
  const [clicked, setClicked] = useState(1);

  return (
    <Router>
      <div>
        <nav className={styles.menu}>
          <ul className={styles.nav}>
            {buttons.map((item, index) => {
              return (
                <li key={index}>
                  <NavLink to={`/buttons/${index}`}>
                    <button
                      className={classnames({
                        [styles.button]: true,
                        [styles.selected]: clicked === index
                      })}
                      onClick={() => setClicked(index)}
                    >
                      {item}
                    </button>
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </nav>
        <Routes>
          {/* 默认路由指向Обо мне页面 */}
          <Route path="/" element={<About />} />
          {/* 根据索引渲染对应组件 */}
          <Route path="/buttons/0" element={<Todo />} />
          <Route path="/buttons/1" element={<About />} />
          {/* 重定向未定义路由到默认页 */}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

精简版（用NavLink自带状态） #

const App = () => {
  const buttons = ["Дела", "Обо мне"];

  return (
    <Router>
      <div>
        <nav className={styles.menu}>
          <ul className={styles.nav}>
            {buttons.map((item, index) => {
              return (
                <li key={index}>
                  <NavLink 
                    to={index === 1 ? "/" : `/buttons/${index}`}
                    className={({ isActive }) => 
                      classnames(styles.button, { [styles.selected]: isActive })
                    }
                  >
                    {item}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<About />} />
          <Route path="/buttons/0" element={<Todo />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </Router>
  );
};

这里让"Обо мне"按钮直接跳转至默认路由/，NavLink会自动识别当前路由并添加激活类名。

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