如何为React映射生成的列表项添加路由？

你遇到的报错是因为**<Link>指向的路径（/buttons/0、/buttons/1）在<Routes>中没有对应的路由规则**，React Router找不到匹配的组件，所以抛出了路径不匹配的错误。

核心思路是让按钮的跳转路径和已配置的路由规则对应，同时优化选中状态的管理（依赖路由状态而非手动维护的state，避免刷新页面状态丢失）。

步骤1：调整按钮与路由的对应关系 #

把按钮数组改成包含「显示文本」和「对应路由路径」的对象，避免通过index硬编码路径：

const buttons = [
  { text: "About me", path: "/" },
  { text: "Todos", path: "/todo" }
];

步骤2：用路由状态控制按钮选中样式 #

通过useLocation钩子获取当前路由路径，用它判断按钮是否处于选中状态，替代原来的clicked状态：

1. 先引入useLocation：

import { BrowserRouter as Router, Route, Link, Routes, useLocation } from "react-router-dom";

2. 在组件内获取当前路由：

const location = useLocation();

完整修改后的代码 #

import React from "react";
import Todo from "../Todo/Todo";
import About from "../About/About";
import { BrowserRouter as Router, Route, Link, Routes, useLocation } from "react-router-dom";
import classnames from "classnames";
import styles from "./App.module.css";

const App = () => {
  const location = useLocation();
  const buttons = [
    { text: "About me", path: "/" },
    { text: "Todos", path: "/todo" }
  ];

  return (
    <Router>
      <div>
        <nav className={styles.menu}>
          <ul className={styles.nav}>
            {buttons.map((item, index) => {
              return (
                <li key={index}>
                  <Link to={item.path}>
                    <button
                      className={classnames(
                        styles.button,
                        { [styles.selected]: location.pathname === item.path }
                      )}
                    >
                      {item.text}
                    </button>
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<About />} />
          <Route path="/todo" element={<Todo />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

1. 路径匹配：按钮的跳转路径直接对应已配置的/和/todo，解决了路由不匹配的核心问题。
2. 状态同步：用location.pathname判断选中状态，路由切换（包括刷新页面）时选中样式会自动同步，不需要手动维护clicked状态。
3. 代码简洁性：移除了冗余的onClick逻辑，让路由职责更清晰。

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