React Router路由列表存入useState报错：prevCountryRoutes不可迭代

有人有React Router使用经验吗？想请教下能不能创建路由列表并存入useState里？我尝试用[...prevCountryRoutes]语法时，碰到了“prevCountryRoutes不可迭代”的错误，相关代码如下：

const [countriesWithRouteList,setCountriesWithRouteList]=React.useState(JSON.parse(localStorage.getItem("countriesWithRouteList")) || [])
const [countryRoutes,setCountryRoutes]=React.useState()

function addCountryRoute(co){
   if(countriesWithRouteList.filter(el => el == co) == null){
     console.log('already route exists')
   }else{
     console.log('country page being added')
     setCountryRoutes((prevCountryRoutes)=>{
       const newRoute = <Route 
         key={nanoid()}
         path={`/countrypage/${co.replace(/ /g, '%20')}`} 
         element={
           <CountryPage 
             country={co}
             holidays={holidays}
             handleDeleteClick={handleDeleteClick}
             handleFormSubmit={handleFormSubmit}
           />
         }
       />
       return(
         [...prevCountryRoutes, newRoute]
       )
     })
   }
   setCountriesWithRouteList(prevList => [...prevList, co])
 }

问题原因及解决办法 #

1. 初始值未设为数组 #

countryRoutes的useState初始值是undefined（未传初始参数），第一次调用setCountryRoutes时，prevCountryRoutes就是undefined，无法用扩展运算符...展开——只有数组或可迭代对象才能使用该语法。

解决： 将初始值设为空数组：

const [countryRoutes,setCountryRoutes]=React.useState([])

2. 重复路由判断逻辑错误 #

你用countriesWithRouteList.filter(el => el == co) == null判断路由是否已存在，这是错误的——filter方法始终返回数组，哪怕没有匹配项也是空数组，空数组不等于null，导致判断永远不成立，会重复添加路由。

解决： 改用some方法检查是否存在匹配项（更高效，找到匹配项即停止遍历）：

if(countriesWithRouteList.some(el => el === co)) {
  console.log('already route exists')
} else {
  // 添加路由的逻辑
}

3. 优化建议：别直接存JSX到state #

虽然可以将<Route>元素存入state，但更推荐存储路由的配置数据（如路径、参数等），而非直接存JSX。这样state中是纯数据，更易维护和序列化，还能避免组件依赖变化引发的不必要渲染。

示例代码：

// 初始化state为配置数组
const [countryRoutes, setCountryRoutes] = useState([])

// 添加路由时存储配置数据
setCountryRoutes(prev => [...prev, {
  id: nanoid(),
  path: `/countrypage/${co.replace(/ /g, '%20')}`,
  country: co
}])

// 渲染时动态生成Route组件
return (
  <Routes>
    {countryRoutes.map(route => (
      <Route
        key={route.id}
        path={route.path}
        element={<CountryPage 
          country={route.country}
          holidays={holidays}
          handleDeleteClick={handleDeleteClick}
          handleFormSubmit={handleFormSubmit}
        />}
      />
    ))}
  </Routes>
)

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