React中无法基于列表动态创建路由问题求助

你的代码失败的核心原因是没有使用React状态来管理数组数据。

在React中，只有当组件的state或props发生变化时，才会触发组件的重新渲染。你当前使用的是普通JavaScript数组array1和array2，即使在useEffect中修改了它们的内容，React也无法感知到这些变化，自然不会重新渲染组件来生成对应的Route元素。

修改后的代码示例 #

你需要用useState钩子来声明状态数组，这样当数组更新时，React会重新渲染组件并生成动态路由：

import { useState, useEffect } from "react";
import { Route, Routes } from "react-router-dom";
import "./App.css";

function App() {
  // 用useState声明状态数组
  const [routeNames, setRouteNames] = useState([]);

  useEffect(() => {
    // 模拟从数据库获取的数据
    const array1 = [
      { name: "dev", bio: "yeah" },
      { name: "kirath", bio: 'yeah it"s big brain time' }
    ];
    // 提取路由名称并更新状态
    const names = array1.map(object => object.name);
    setRouteNames(names);
  }, []);

  return (
    <div className="App">
      <Routes>
        {routeNames.map((name) => (
          // 给每个Route添加唯一的key属性，避免React警告
          <Route key={name} path={`/${name}`} element={<h1>hello {name}</h1>} />
        ))}
      </Routes>
    </div>
  );
}

export default App;

关键说明 #

• 使用useState创建routeNames状态，当调用setRouteNames更新它时，React会触发组件重渲染，此时Routes内的动态路由会被正确生成。
• 给每个Route添加key属性，这是React列表渲染的强制要求，确保每个元素有唯一标识，避免性能问题和渲染警告。
• 后续对接Firebase实时数据库时，只需在useEffect中替换硬编码的array1为从数据库获取的数据即可，逻辑完全通用。

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